https://github.com/harish-sethuraman/shiny-tab
A re usable *replica* of vercel navigation from vercel.com/design
https://github.com/harish-sethuraman/shiny-tab
Last synced: about 2 months ago
JSON representation
A re usable *replica* of vercel navigation from vercel.com/design
- Host: GitHub
- URL: https://github.com/harish-sethuraman/shiny-tab
- Owner: harish-sethuraman
- Created: 2023-08-04T09:03:43.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-10-18T09:39:10.000Z (almost 2 years ago)
- Last Synced: 2024-10-27T15:42:10.255Z (12 months ago)
- Language: TypeScript
- Homepage: https://shiny-tab.vercel.app
- Size: 118 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## shiny tab
this is a replica of Vercel's [design page](https://vercel.com/design) 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
1. Install the package
```bash
npm i shiny-tab react-spring
```
2. Add the component to tailwind content (if you are using tailwind)
```js
content: [
'node_modules/shiny-tab/**/*.{js,ts,jsx,tsx,mdx}',
/// ...
],
```
3. Import and provide props
```jsx
import Header from "shiny-tab";
// ...
function App() {
const headers = [
{
title: "Home",
icon: ,
onClick: (index: number) => setIndex(index),
},
{
title: "Blogs",
icon: ,
onClick: (index: number) => setIndex(index),
},
{
title: "Works",
icon: ,
onClick: (index: number) => setIndex(index),
},
];
return (
);
}
```
### docs
`links` prop expects `title`, `icon` and `onClick` to be present.
- `title` is shown in desktop and tablet view
- `icon` is shown in mobile view
- `onClick` is for navigating to specific page or setting activeIndex to something
`activeIndex` prop is for highlighting the active pill.