shiny tab
this is a replica of Vercel's design page tabs.
[!NOTE] The design credit goes to respective designers from Vercel. This repo is just a replica of the same tabs as an re usable package
| props | type | default |
|---|---|---|
| links | Array<{ title: string; icon: React.ReactNode;onClick: (activeIndex:number) => void;}> |
- |
| index | number |
0 |
| config |
AnimationConfig from 'react-spring' |
- |
usage
- Install the package
npm i shiny-tab react-spring- Add the component to tailwind content (if you are using tailwind)
content: [
'node_modules/shiny-tab/**/*.{js,ts,jsx,tsx,mdx}',
/// ...
],- Import and provide props
import Header from "shiny-tab";
// ...
function App() {
const headers = [
{
title: "Home",
icon: <HomeIcon className="h-6 w-6" />,
onClick: (index: number) => setIndex(index),
},
{
title: "Blogs",
icon: <BookOpenIcon className="h-6 w-6" />,
onClick: (index: number) => setIndex(index),
},
{
title: "Works",
icon: <BriefcaseIcon className="h-6 w-6" />,
onClick: (index: number) => setIndex(index),
},
];
return (
<div>
<Header links={headers} activeIndex={index} />
</div>
);
}docs
links prop expects title, icon and onClick to be present.
-
titleis shown in desktop and tablet view -
iconis shown in mobile view -
onClickis for navigating to specific page or setting activeIndex to something
activeIndex prop is for highlighting the active pill.