This component is inspired by how Arc makes you choose its app icon. 🖥 Watch the demo video to see the component live in action!
⚡️ TECHNOLOGIES
- React
- Tailwind CSS
- Typescript ⚙️ HOW IT WORKS
const items = [
{
src: '/images/arc-icon/1.png',
},
{
src: '/images/arc-icon/2.png',
},
...
]
<ADFSchelfSelector
className="w-full max-w-lg"
selected={selectedIndex}
onSelect={(index) => setSelectedIndex(index)}
items={items}
/>
Change color indicator or sides fade color with:
<ADFSchelfSelector
...
classNameSides?: string;
classNameIndicator?: string;
/>
Replace this following default classes:
> classNameSides = "via-white to-white",
> classNameIndicator = "bg-blue-500 shadow-blue-500",
Follow me on X: adfdev
Top comments (0)