Search the library/

Library

Components
Sections
Backgrounds
Motion
Data
Navigation

Forms
Checkout
3D
Templates
Free components

Build

Documentation
CLI
MCP server
Catalog API
llms.txt

Sundae

Pricing
License
Terms
Privacy
hello@sundaeui.dev

sundae

The library88 of 314

UI components

Accordions, toasts and the other building blocks every interface needs. Each one has finished interaction states, keyboard support and motion that respects reduced-motion settings.

All³¹⁴ Components¹¹³ Sections¹² Backgrounds⁴ Motion⁵ Data⁴⁶ Navigation¹⁸ Forms⁸⁷ Checkout²² 3D⁴ Templates³

All Free Pro

Sort by

All Free Pro

Sort by

All components AI & agents9 Buttons11 Social14 Players6 Steppers

S—042Context MeterA token-budget meter for AI apps: one bar of coloured segments, a big total and chips that isolate each source.A token-budget meter for AI apps: one bar of coloured segments, a big total and chips that isolate each source.Components · Futuristicfree
S—046Hold to ConfirmA destructive button you have to hold: the fill sweeps across, letting go early springs it back.A destructive button you have to hold: the fill sweeps across, letting go early springs it back.Components · Refinedfree
S—047Reaction BurstEmoji reaction chips with a picker; reacting bursts a few copies of the emoji and rolls the count.Emoji reaction chips with a picker; reacting bursts a few copies of the emoji and rolls the count.Components · Playfulfree
S—052Agent StepsA live tool-call timeline for agent runs: shimmer on the active step, ticks on finished ones, expandable details.A live tool-call timeline for agent runs: shimmer on the active step, ticks on finished ones, expandable details.Components · Understatedfree
S—062Copy CommandAn install command with package-manager tabs and a copy button that swaps to a check in place.An install command with package-manager tabs and a copy button that swaps to a check in place.Components · Understatedfree
S—064Inline ConfirmA delete button that grows into “Sure? Cancel / Delete” in place, then settles on a check.A delete button that grows into “Sure? Cancel / Delete” in place, then settles on a check.Components · Understatedfree
S—067Setup ChecklistAn onboarding checklist: ticks draw in, a ring fills with each step, and the title turns to “All set”.An onboarding checklist: ticks draw in, a ring fills with each step, and the title turns to “All set”.Components · Understatedfree
S—013Fold AccordionA numbered FAQ accordion that animates real content height with CSS grid. No measuring, no jank.A numbered FAQ accordion that animates real content height with CSS grid. No measuring, no jank.Components · Understatedfree
S—016Toast StackNotifications that stack into one card, fan out on hover, swipe away and follow a promise.Notifications that stack into one card, fan out on hover, swipe away and follow a promise.Components · Refinedfree
S—024Confirm DialogA modal confirmation with typed-phrase protection, pending and error states, built on native <dialog>.A modal confirmation with typed-phrase protection, pending and error states, built on native <dialog>.Components · Understatedfree
S—027Avatar StackOverlapping avatars that fan apart on hover, with presence dots, tooltips and a +N overflow list.Overlapping avatars that fan apart on hover, with presence dots, tooltips and a +N overflow list.Components · Refinedfree
S—079Follow ButtonFollow becomes Following with a width-morph and tick; hovering a followed state previews Unfollow.Follow becomes Following with a width-morph and tick; hovering a followed state previews Unfollow.Components · Refinedfree
S—086Download ButtonA download button that shrinks into a progress ring, counts up, then expands back with a tick and file size.A download button that shrinks into a progress ring, counts up, then expands back with a tick and file size.Components · Refinedfree
S—089Vote ArrowsUp / down vote control where the score rolls in the vote’s direction and the chosen arrow fills.Up / down vote control where the score rolls in the vote’s direction and the chosen arrow fills.Components · Refinedfree
S—094Bookmark ButtonA save button whose ribbon fills from the top and dips like it was pressed, with an optional “Saved to” toast line.A save button whose ribbon fills from the top and dips like it was pressed, with an optional “Saved to” toast line.Components · Refinedfree
S—095Snooze MenuA snooze popover with smart presets that show the actual resulting time, plus a custom stepper.A snooze popover with smart presets that show the actual resulting time, plus a custom stepper.Components · Refinedfree
S—108Snap CarouselA native scroll-snap card carousel with arrow buttons and pager dots that stretch toward the active card.A native scroll-snap card carousel with arrow buttons and pager dots that stretch toward the active card.Components · Refinedfree
S—109Read MoreClamped text that expands to its full height smoothly, with a toggle that only appears if the text actually overflows.Clamped text that expands to its full height smoothly, with a toggle that only appears if the text actually overflows.Components · Refinedfree
S—110Cookie ConsentA compact cookie card with Accept / Reject and a Customise view where each category has its own switch.A compact cookie card with Accept / Reject and a Customise view where each category has its own switch.Components · Refinedfree
S—112Theme ToggleA sun / moon button whose rays retract and a crescent bites in as it switches; a three-way variant adds System.A sun / moon button whose rays retract and a crescent bites in as it switches; a three-way variant adds System.Components · Refinedfree
S—113Poll CardA poll that reveals results after you vote: bars grow to their share, your pick is ticked, the leader is bold.A poll that reveals results after you vote: bars grow to their share, your pick is ticked, the leader is bold.Components · Refinedfree
S—114Hover CardHover or focus a @mention to preview the profile in a card, with an open delay, a grace period and a Follow button.Hover or focus a @mention to preview the profile in a card, with an open delay, a grace period and a Follow button.Components · Refinedfree
S—115Split ButtonA primary action with a chevron that opens related variants; picking one makes it the new default action.A primary action with a chevron that opens related variants; picking one makes it the new default action.Components · Refinedfree
S—116Submit ButtonA button that holds its width through idle, loading, success and error, with a spinner, a drawn tick and a shake.A button that holds its width through idle, loading, success and error, with a spinner, a drawn tick and a shake.Components · Refinedfree
S—117Speed DialA floating + button that rotates to × and fans out labelled mini actions, staggered from the nearest one.A floating + button that rotates to × and fans out labelled mini actions, staggered from the nearest one.Components · Refinedfree
S—118Announcement BarA slim top-of-page bar that rotates through announcements with a vertical slide, pauses on hover and can be dismissed.A slim top-of-page bar that rotates through announcements with a vertical slide, pauses on hover and can be dismissed.Components · Refinedfree
S—123Timezone SliderDrag one time across a day and see it in every team member’s timezone, with working hours shaded on each track.Drag one time across a day and see it in every team member’s timezone, with working hours shaded on each track.Components · Refinedfree
S—128Message ThreadA compact chat: your message slides up from the composer, shows Sent then Read, and a typing indicator precedes replies.A compact chat: your message slides up from the composer, shows Sent then Read, and a typing indicator precedes replies.Components · Refinedfree
S—130Keyboard Shortcuts SheetA searchable keyboard-shortcut reference grouped by area; press ? to open it, and typing filters keys and names.A searchable keyboard-shortcut reference grouped by area; press ? to open it, and typing filters keys and names.Components · Refinedfree
S—140API Key RowAn API key row: masked by default, reveal with a press, copy with a tick, and roll the key behind an inline confirm.An API key row: masked by default, reveal with a press, copy with a tick, and roll the key behind an inline confirm.Components · Refinedfree
S—144Order TrackerA vertical delivery timeline: completed steps get ticks and times, the current step pulses, and an ETA heads the card.A vertical delivery timeline: completed steps get ticks and times, the current step pulses, and an ETA heads the card.Components · Refinedfree
S—147Voice NoteA chat voice-message bubble: play / pause, a waveform that fills as it plays and can be scrubbed, plus 1× / 1.5× / 2×.A chat voice-message bubble: play / pause, a waveform that fills as it plays and can be scrubbed, plus 1× / 1.5× / 2×.Components · Refinedfree
S—149Inline AlertInline alerts in info, success, warning and error that differ by icon and weight, not colour, with actions and dismiss.Inline alerts in info, success, warning and error that differ by icon and weight, not colour, with actions and dismiss.Components · Refinedfree
S—150Grid / List View SwitcherA grid / list toggle where the items themselves morph between layouts using FLIP, instead of re-rendering in place.A grid / list toggle where the items themselves morph between layouts using FLIP, instead of re-rendering in place.Components · Refinedfree
S—151Share SheetA share card: copy the link with a tick, pick access (anyone / team / invite-only), and share targets as a row of icons.A share card: copy the link with a tick, pick access (anyone / team / invite-only), and share targets as a row of icons.Components · Refinedfree
S—152Slide to ConfirmA track you swipe the knob across to confirm; the label fades as you go, short drags spring back, completion locks.A track you swipe the knob across to confirm; the label fades as you go, short drags spring back, completion locks.Components · Refinedfree
S—153Pull to RefreshPull a list down past a threshold: the arrow rotates to say “release”, a spinner holds while loading, new rows slide in.Pull a list down past a threshold: the arrow rotates to say “release”, a spinner holds while loading, new rows slide in.Components · Refinedfree
S—156RSVP CardAn event card with Going / Maybe / Can’t go; your avatar joins the attendee stack and the counts update as you choose.An event card with Going / Maybe / Can’t go; your avatar joins the attendee stack and the counts update as you choose.Components · Refinedfree
S—157Habit StreakA habit card with this week’s days to tick off, a streak counter that rolls up and a best-streak marker.A habit card with this week’s days to tick off, a streak counter that rolls up and a best-streak marker.Components · Refinedfree
S—161Code TabsA code block with file tabs, line numbers, highlighted lines and a copy button; long lines scroll, not wrap.A code block with file tabs, line numbers, highlighted lines and a copy button; long lines scroll, not wrap.Components · Refinedfree
S—163Add to CartAn Add to cart button that morphs into a − qty + stepper after the first tap, and back to the button at zero.An Add to cart button that morphs into a − qty + stepper after the first tap, and back to the button at zero.Components · Refinedfree
S—168Lightbox GalleryA thumbnail grid that opens a lightbox growing from the tapped tile; swipe or use arrows, Escape returns to the grid.A thumbnail grid that opens a lightbox growing from the tapped tile; swipe or use arrows, Escape returns to the grid.Components · Refinedfree
S—169Load More ListA list that loads the next page with pulsing placeholder rows, then fades real rows in; can auto-load near the end.A list that loads the next page with pulsing placeholder rows, then fades real rows in; can auto-load near the end.Components · Refinedfree
S—176Next Meeting CardA next-meeting widget that counts down to start, turns its Join button solid when it’s time, and lists who’s attending.A next-meeting widget that counts down to start, turns its Join button solid when it’s time, and lists who’s attending.Components · Refinedfree
S—180Info TipA small (i) next to a label that opens a toggletip on click or focus, with a Learn more link; works on touch.A small (i) next to a label that opens a toggletip on click or focus, with a Learn more link; works on touch.Components · Refinedfree
S—188Reading ProgressAn article reader with a thin progress bar on top, minutes left that count down, and a back-to-top ring that fills.An article reader with a thin progress bar on top, minutes left that count down, and a back-to-top ring that fills.Components · Refinedfree
S—193Emoji PickerAn emoji picker with search, category tabs, a recents row that learns, arrow-key grid navigation and a name preview.An emoji picker with search, category tabs, a recents row that learns, arrow-key grid navigation and a name preview.Components · Refinedfree
S—196Image CropperCrop an image: drag the frame, pull a corner to resize, lock an aspect ratio, zoom, and read the exact output size.Crop an image: drag the frame, pull a corner to resize, lock an aspect ratio, zoom, and read the exact output size.Components · Refinedfree
S—198Split PaneTwo resizable panes: a draggable divider that snaps a pane closed, remembers its size and resets on double-click.Two resizable panes: a draggable divider that snaps a pane closed, remembers its size and resets on double-click.Components · Refinedfree
S—200Task ListA to-do list: add with Enter, check off with a strike, filter All / Active / Done, clear completed, and undo a delete.A to-do list: add with Enter, check off with a strike, filter All / Active / Done, clear completed, and undo a delete.Components · Refinedfree
S—202Store LocatorA schematic map with numbered pins and a synced list: pick a pin or a row, filter open-now, and see distance and hours.A schematic map with numbered pins and a synced list: pick a pin or a row, filter open-now, and see distance and hours.Components · Refinedfree
S—204Selectable GridA photo grid with selection mode: tap to pick, Shift-click a range, drag across tiles, then act on the selection.A photo grid with selection mode: tap to pick, Shift-click a range, drag across tiles, then act on the selection.Components · Refinedfree
S—209Approval CardAn approval request: details at a glance, Approve or Reject with an optional note, a resolved state and an undo window.An approval request: details at a glance, Approve or Reject with an optional note, a resolved state and an undo window.Components · Refinedfree
S—210Active SessionsSigned-in devices with place and last active: this one is pinned, revoke others with a confirm or all at once.Signed-in devices with place and last active: this one is pinned, revoke others with a confirm or all at once.Components · Refinedfree
S—212Video TrimmerTrim a clip: drag the in and out handles over a frame strip, scrub the playhead, and read the new duration as you go.Trim a clip: drag the in and out handles over a frame strip, scrub the playhead, and read the new duration as you go.Components · Refinedfree
S—214Event CalendarA month view with event dots per day: pick a day to list its events below, jump months, and add a quick event.A month view with event dots per day: pick a day to list its events below, jump months, and add a quick event.Components · Refinedfree
S—215FAQ SearchA searchable FAQ: matches highlight in questions and answers, topics filter the list, and answers open in place.A searchable FAQ: matches highlight in questions and answers, topics filter the list, and answers open in place.Components · Refinedfree
S—220Contact CardA person card with quick actions: copy email or phone with feedback, see their local time, and expand for more details.A person card with quick actions: copy email or phone with feedback, see their local time, and expand for more details.Components · Refinedfree
S—222Permission PromptA pre-permission screen for camera, mic or notifications: explains why, then shows granted, denied or how-to-fix states.A pre-permission screen for camera, mic or notifications: explains why, then shows granted, denied or how-to-fix states.Components · Refinedfree
S—225World ClocksA list of city clocks with day/night markers and offsets from you; add a city from search and remove with a tap.A list of city clocks with day/night markers and offsets from you; add a city from search and remove with a tap.Components · Refinedfree

Page 1 of 2