Animated componentspro available
@hairline
Animated components · data updated 2026-10-27
Interaction-first React components where every change of state morphs: one file each, no animation library, hairline borders.
aianimationauthbuttonscardschartsdeveloper-toolsformshooksiconsloadersmapsmarketingmedianavigationonboardingoverlayspro-availabletablestheming
Install
npx shadcn@latest add https://hairlineui.com/r/registry.jsonHealth
StatusUnknown
Last commit—
License—
Open issues—
ArchivedNo
Stars—
Components (179)
buttonbutton-groupsplit-buttoncopy-buttonaction-buttonexpanding-button-groupfloating-button-groupicon-morphinputtextareapassword-inputsearch-inputselectmulti-selectdate-pickercheckboxradio-groupswitchslidersegmented-controltooltippopoverhover-carddropdown-menucontext-menudialogsheetbadgeavatarspinnerprogressskeletonempty-statealertkbdtabsaccordioncollapsiblebreadcrumbpaginationtoggle-groupstepstext-morphstatus-buttonnumber-rollpricing-togglewaitlist-fieldcode-inputsteps-formdate-range-pickermorphing-navfeature-tabsscroll-storystats-bandannouncement-pilltestimonialsfaq-accordionlogo-marqueeexpanding-gallerycard-deck
Components: button, button-group, split-button, copy-button, action-button, expanding-button-group, floating-button-group, icon-morph, input, textarea, password-input, search-input, select, multi-select, date-picker, checkbox, radio-group, switch, slider, segmented-control, tooltip, popover, hover-card, dropdown-menu, context-menu, dialog, sheet, badge, avatar, spinner, progress, skeleton, empty-state, alert, kbd, tabs, accordion, collapsible, breadcrumb, pagination, toggle-group, steps, 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, donut-chart, activity-heatmap, live-line-chart, agent-playback, wallet, pricing-plans, booking, cart, referral, feedback, buy-box, checkout, order-status, subscription, file-share, poll, cookie-consent, create-password, verify-code, delete-workspace, terms, not-found, waitlist, storage, usernamePreview
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.