Beautifully crafted components
65 open-source components you can copy, paste, and own. Accessible, themeable, and built with Tailwind CSS + motion.
Countdown Timer
Data DisplayCounts down from a duration and fires a callback at zero.
Ship faster
Carousel
NavigationA slide carousel with arrows and dot indicators.
Card Marquee
AnimationAn infinite marquee of any children, horizontal or vertical.
“Dropped it in on Friday, shipped on Monday.”
Testimonial
CardsA customer quote, as a bordered card or a plain pull quote.
“The offline sync just works - we stopped writing our own.”
“Dropped it in on Friday, shipped on Monday.”
Testimonials Marquee
CardsA looping marquee of testimonial cards, horizontal or vertical.
Cursor Tooltip
OverlaysA floating panel that springs along with the cursor.
Animated Text Logo
TypographyAn outlined wordmark with a pointer-tracking glow and a looping shimmer.
pnpm dlx shadcn@latest add @canvas-ui/particle-scroll-reactInstall Command
Data DisplayA terminal block with package-manager tabs and a copy button.
Fireworks
Background EffectsAuto-launching firework bursts painted on a canvas.
Rotating Status
Data DisplayA pill that cycles availability statuses beside a pulsing live dot.
Rating Bars
Data DisplayA review-score distribution whose bars fill in sequence.
Bar Chart Mini
Data DisplayA compact bar chart whose bars grow in sequence and show values on hover.
Stacked Progress
Data DisplayA stacked bar whose coloured segments grow in one after another.
Otp Input
InputsA one-time-code input where focus auto-advances as you type.
Pill Tabs
NavigationA pill tab bar where the raised pill slides to your selection.
Rating Emoji
InputsA 1-5 emoji scale that pops the face you select.
Notice Banner
FeedbackA notice bar that drops in and can be dismissed.
Skeleton Card
FeedbackA card-shaped loading placeholder built from pulsing blocks.
Changes saved
Your draft is up to date.
Toast
FeedbackA toast that slides in and can be dismissed.
Drag & drop files here
PNG, JPG or PDF up to 10MB
File Drop
InputsA drop zone whose upload icon bobs, inviting a drag.
- 1Install the package
- 2Add the provider
- 3Ship it
Numbered List
LayoutAn ordered list whose numbered badges pop in sequence.
- Unlimited projects
- Priority support
- Custom domains
Feature List
LayoutA feature checklist whose rows slide in and checks pop.
Tag Cloud
Data DisplayA cloud of weighted tags that drift in and pop on hover.
Token expires soon
Rotate it before Friday to avoid downtime.
Alert Callout
FeedbackA callout that slides in, its icon popping to draw attention.
Button Group
ButtonsA joined, segmented button group.
Social Links
NavigationA row of circular icon links for social profiles.
Dot Pagination
NavigationDot pagination where the active dot stretches into a pill.
Divider Text
LayoutA horizontal divider with a centred label.
Star Rating
InputsA star rating you can click, with hover preview.
void main() {
runApp(const App());
}Code Window
LayoutA macOS-style window frame around a code block.
Gradient Button
ButtonsButton with an animated conic gradient border and hover shimmer.
Shimmer Button
ButtonsA button with a light sweep that shimmers across on hover.
Magnetic Button
ButtonsA button magnetically attracted to the cursor while hovered.
Aurora
Aurora Background
Background EffectsA container with a slowly drifting aurora gradient behind its content.
Wavy Text
TypographyEach letter bobs up and down in a continuous wave.
Animated Check
FeedbackA circle and checkmark that draw themselves in.
Like Button
ButtonsA heart that pops and bursts particles when liked.
Text Shimmer
TypographyText with a light sheen sweeping across it.
Particle Field
Background EffectsA canvas field of drifting, twinkling particles.
Constellation
Background EffectsCanvas nodes that drift and link with lines when near.
Gsap Text Reveal
TypographyReveals text character-by-character with a GSAP stagger.
Every component, with source.
Accordion Motion
LayoutAn accordion that animates panel height and chevron.
Pro plan
Everything, unlimited.
Gradient Border
Background EffectsA card wrapped in a rotating conic-gradient border.
Pulse Dot
Data DisplayA status dot with a pulsing halo.
Blur Text
TypographyReveals text word-by-word with a blur-to-sharp transition.
Theme Ripple Toggle
ButtonsReveals the newly themed page through a circle expanding from the button.
Joined by 2,400+ developers
Social Proof
Data DisplayOverlapping avatars that pop in sequence beside a proof line.
Theme Toggle
ButtonsSun and moon segments with a thumb that glides between them.
Nav Tabs Count
NavigationUnderline tabs with counts; the underline glides on click.
Slider
InputsRange slider whose fill and thumb follow the value on a spring.
Filter Chips
InputsA row of chips where clicking one makes it the active filter.
Draft Engine
Collaborative MDX editing with offline sync.
Card Hover
CardsA card that springs up and scales slightly on hover.
2.4 MB
Upload Progress
Data DisplayA file row whose progress bar fills smoothly to its value.
Number Stepper
InputsQuantity stepper whose number pops in the direction it moved.
Days
Hours
Mins
Secs
Countdown Boxes
Data DisplayUnit boxes that flip in, then tick down to a target time.
Logo Cloud
LayoutA trusted-by grid whose wordmarks fade in and sharpen on hover.
Icon Tabs
NavigationIcon-only tab bar where the raised tab slides to your pick.
Avatar Group Add
Data DisplayOverlapping avatars with a + button that pops new ones in.
Notify Button
ButtonsBell button that rings on click and clears its unread badge.
Word Reveal
AnimationReveals a sentence one word at a time as it enters.
Orbit Analytics
Sub-second queries over billions of events.
Tilt Card
CardsCard that tilts in 3D toward the pointer.
Animated Counter
Data DisplayNumber that counts up to its value on mount.
Shimmer Text
TypographyText with a highlight band travelling across it.
Copy Button
ButtonsCopies a value and confirms with an icon swap.
Ledger UI Kit
60+ accessible components.
Glow Card
Background EffectsCard with a radial highlight that tracks the pointer.