Interest Picker
An interactive interest selection component with animated marquee rows of tags. Users can select interests that animate and fly to the selection area. Perfect for onboarding flows and user preference screens.
Tell us about your interests
Select atleast 5 interests
0
Install using CLI
npx shadcn@latest add "https://obsidianui.dev/r/interest-picker.json"Install Manually
1
Install dependencies
2
Copy the source code
Copy into components/ui/interest-picker.tsx
Note: This is a large component (370+ lines). Install via CLI for the full source code with all animations and marquee logic.
Props
| Prop Name | Type | Default | Description |
|---|---|---|---|
| interests | Interest[] | [...defaults] | Array of interest items with id, name, and icon |
| showEmptySlot | boolean | false | Show empty slots for selected items |
| onSubmit | (interests) => Promise<void> | - | Callback when interests are submitted |
Features
- 🎯 Animated Selection - Items fly to selection area with spring physics
- 📜 5-Row Marquee - Scrollable rows with gradient fade edges
- ✨ 35+ Built-in Interests - Pre-configured options with Lucide icons
- 🔄 Deselect Support - Click selected items to remove them
- ✅ Validation - Requires minimum 5 selections before submit