Shelf selector (Inspired Arc icon selector)

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",

Links

👉 Get Shelf selector

👉 GumRoad @adfdev

⚡️ Website