Shelf selector (Inspired Arc icon selector)

This content originally appeared on DEV Community and was authored by Alain Di Fabio

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

This content originally appeared on DEV Community and was authored by Alain Di Fabio