Twenty more components
The next set — form controls, feedback, and composed blocks. All monochrome, accessible, and built on the same motion language as Page 1.
Form & input
Radio group
Single choice from a set.
Slider
Range selection with live value.
Toggle group
Segmented control, single select.
Star rating
Interactive, keyboard accessible.
Tag input
Add with Enter or comma, remove with backspace.
OTP input
Verification code, paste-aware.
File dropzone
Drag & drop or browse.
Combobox
Searchable select.
Display & feedback
Progress
Determinate and indeterminate.
Stat counter
Counts up when scrolled into view.
Hover card
Rich preview on hover/focus.
Collapsible
Show and hide content.
Announcement banner
Dismissible notice bar.
Code block
Filename header with copy.
import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export const cn = (...c) => twMerge(clsx(c));Composed blocks
Stepper
Multi-step progress.
- AuditFind what's winnable
- 2DesignThe mechanism
- 3BuildShip it
- 4CompoundHand over
Timeline
Reusable vertical timeline.
- 2021
Founded the agency
- 2024
Started the SaaS studio
- 2026
Built the Digital HQ
Pricing table
Three tiers, monthly/annual toggle.
Starter
For a single focused initiative.
- One growth channel
- Monthly reporting
- Async support
Growth
PopularThe compounding system.
- Multi-channel system
- Bi-weekly sessions
- Priority support
- Quarterly strategy
Scale
Full-stack, hands-on.
- Everything in Growth
- Dedicated roadmap
- Embedded team
- Weekly reviews
Carousel
Scroll-snap with controls.
Sheet / drawer
Slide-in side panel.
Notification feed + avatar group
Activity items and a stacked avatar group.
- ARAditi subscribed to the newsletter2m
- KMKaran booked a working session1h
- PNPriya ran the SEO audit tool3h