0.0.1 • Published 7 months ago
shiny-tab v0.0.1
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.
title
is shown in desktop and tablet viewicon
is shown in mobile viewonClick
is for navigating to specific page or setting activeIndex to something
activeIndex
prop is for highlighting the active pill.