Animated componentspro available
@hairline
Animated components · data updated 2026-10-17
Interaction-first React components where every change of state morphs: one file each, no animation library, hairline borders.
aianimationaudioauthblocksbuttonscardschartsdeveloper-toolsformshooksiconsloadersmapsmarketingmedianavigationonboardingoverlayspro-availabletablestheming
Install
npx shadcn@latest add https://hairlineui.com/r/registry.jsonHealth
StatusUnknown
Last commit—
License—
Open issues—
ArchivedNo
Stars—
Components (113)
text-morphstatus-buttonnumber-rollpricing-togglewaitlist-fieldcode-inputsteps-formdate-range-pickermorphing-navfeature-tabsscroll-storystats-bandannouncement-pilltestimonialsfaq-accordionlogo-marqueeexpanding-gallerycard-deckworkflow-canvasimage-comparemagnifying-dockhold-to-confirmswipe-actionsdrop-zonedrop-zone-membranewheel-pickermorphing-chartrange-rulerratio-balancersplit-panetag-inputavatar-cropperweek-calendarinline-editcomboboxcron-inputtime-range-pickerjson-inspectorstepper-inputsparklineprivacy-maskdata-tablekanban-boardfilter-bartree-viewdoc-commentsapi-keysteam-memberssettings-formauth-cardwebhooksdomain-connectlog-streamcsv-importnotification-inboxintegrationsstatus-barscommand-palettetoast-stacklive-activity
Components: text-morph, status-button, number-roll, pricing-toggle, waitlist-field, code-input, steps-form, date-range-picker, morphing-nav, feature-tabs, scroll-story, stats-band, announcement-pill, testimonials, faq-accordion, logo-marquee, expanding-gallery, card-deck, workflow-canvas, image-compare, magnifying-dock, hold-to-confirm, swipe-actions, drop-zone, drop-zone-membrane, wheel-picker, morphing-chart, range-ruler, ratio-balancer, split-pane, tag-input, avatar-cropper, week-calendar, inline-edit, combobox, cron-input, time-range-picker, json-inspector, stepper-input, sparkline, privacy-mask, data-table, kanban-board, filter-bar, tree-view, doc-comments, api-keys, team-members, settings-form, auth-card, webhooks, domain-connect, log-stream, csv-import, notification-inbox, integrations, status-bars, command-palette, toast-stack, live-activity, live-cursors, live-map, theme-toggle, pricing-calculator, comparison-table, onboarding-checklist, sortable-list, changelog-timeline, changelog-trace, changelog-scrubber, cookie-banner, newsletter-footer, prompt-composer, agent-composer, mention-menu, attachment-chip, mode-switcher, model-picker, voice-input, voice-note, thinking-indicator, thinking-trace, tool-call, clarifying-question, approval-card, plan, web-research, command-output, task-progress, task-log, streaming-answer, code-block, citation, response-versions, selection-actions, inline-rewrite, diff-review, action-receipt, chat-notice, usage-meter, usage-limits, chat-scroll, message-edit, chat-history, earnings-chart, steps-chart, revenue-chart, area-chart, trend-chart, combo-chart, stage-bars, activity-rings, agent-playbackPreview
Live sandbox previews render component source client-side. Where a component can’t be rendered standalone, sh4dcn falls back to its source and install command.