C
Cuelark UI
Accordion: Numbered FAQaccordion-demoA single-open FAQ with mono index numbers.
Accordion: Separated and dashedaccordion-separatedCard-like items, and dashed rules between items.
Alert: Tonesalert-demoInfo, success (dismissible), warning and destructive.
Alert Dialog: Revoke a keyalert-dialog-demoA destructive confirmation.
Animated Icon: Smart motionanimated-icon-demoTen icons, each with its own animation.
Animated List: Activity feedanimated-list-demoPayments, members, merges and comments.
Artifact: Exampleartifact-demoA generated document.
Aspect Ratio: 16:9 frameaspect-ratio-demoA responsive frame.
Avatar: Sizes, status and groupavatar-demoPresence dots and a group of seven.
Badge: Variantsbadge-demoSeven tones from neutral to solid.
Badge: Status and monobadge-statusStatus dots, a live pulse, mono tags and a badge link.
Border Beam: Highlighted planborder-beam-demoA pricing card with a beam.
Branch: Examplebranch-demoThree versions of a reply.
Breadcrumb: Collapsed trailbreadcrumb-demoA trail with an ellipsis for skipped levels.
Burst: Celebrateburst-demoClick for confetti.
Button: Variantsbutton-demoPrimary, secondary, outline, ghost, destructive and link.
Button Group: Groups and split buttonbutton-group-demoOutline group, split publish button, prev/next.
Button: Sizes, loading and shortcutsbutton-statesKeyboard hints, the loading state, icon buttons and every size.
Card: Pricing cardcard-demoRaised card with crop marks, a label, an action and a footer tray.
Card: Interactive variantscard-variantsOutline, raised and inset cards whose whole surface is a link.
Chain of Thought: Examplechain-of-thought-demoFour steps with search results.
Checkbox: With labelscheckbox-demoLabels, descriptions and the disabled state.
Checkbox: Select allcheckbox-select-allA parent checkbox that turns indeterminate.
Checkpoint: Examplecheckpoint-demoA labelled checkpoint.
Code Block: Examplecode-block-demoTwo highlighted lines.
Collapsible: Changed filescollapsible-demoReveal the rest of a list.
Combobox: Framework pickercombobox-demoSearch with keywords.
Command: Inline and ⌘J dialogcommand-demoAn inline palette and a dialog opened with ⌘J.
Compare Slider: Light vs darkcompare-slider-demoThe same UI in both themes.
Confirmation: Exampleconfirmation-demoA low-risk and a high-risk request.
Context Menu: Layer menucontext-menu-demoShortcuts, a submenu and a destructive item.
Context Meter: Examplecontext-meter-demoLow, high and almost full.
Conversation: Exampleconversation-demoScroll up mid-conversation to see the Latest pill.
Cookie Consent: Bannercookie-consent-demoInline preview with customize.
Copy Button: Command and labelledcopy-button-demoAn inline command and a labelled button.
Countdown: Launch timercountdown-demoDays to seconds.
Dialog: Confirm a destructive actiondialog-confirmA plain confirmation without crop marks.
Dialog: Form dialogdialog-demoA small form with a divided footer tray.
Dock: App dockdock-demoSeven apps with a separator and active dots.
Dot Field: Hero backgrounddot-field-demoMove and click.
Draw Path: Signaturedraw-path-demoA scribble with a signal underline.
Dropdown Menu: Account menudropdown-menu-demoGroups, shortcuts, a submenu and a destructive item.
Empty: Inboxempty-demoTitle, guidance and two actions.
Field: Validated usernamefield-demoType a space to see the error.
File Diff: Examplefile-diff-demoA small refactor.
File Dropzone: Upload areafile-dropzone-demoDrop or browse; files list below.
File Tree: Examplefile-tree-demoA change touching four files.
Flip Grid: Filterable gridflip-grid-demoFilter with a segmented control.
Gradient Text: Drift and spotlightgradient-text-demoA headline accent and a line you light with the pointer.
Hold to Confirm: Delete workspacehold-to-confirm-demoHold to delete; release early to cancel.
Hover Card: Profile previewhover-card-demoA mention that previews a profile.
Inline Citation: Exampleinline-citation-demoTwo citations in a paragraph.
Input: Add-ons and statesinput-addonsIcons, a URL prefix, a keyboard hint, invalid and disabled.
Input: Labeled fieldinput-demoA label, an input and a helper text wired with aria-describedby.
Input OTP: Six-digit codeinput-otp-demoTwo groups of three with a separator.
Item: Settings rowsitem-demoWith a switch, and as a link.
Kbd: Keys and comboskbd-demoSingle keys and combinations.
Label: Required and optionallabel-demoMarkers for required and optional fields.
Magnetic: CTA and iconmagnetic-demoA primary button and an icon button.
Marquee: Two rowsmarquee-demoLabels and pills in opposite directions.
Message: Examplemessage-demoA question and an answer with actions.
Model Selector: Examplemodel-selector-demoFive models across three providers.
Native Select: Countrynative-select-demoA labelled native select.
Number Field: Seats and budgetnumber-field-demoA bounded integer and a currency amount.
Number Ticker: Statsnumber-ticker-demoCurrency, decimal and integer counters.
Orbit: Integrationsorbit-demoTwo rings in opposite directions.
Pagination: With page rangepagination-demoTwenty pages, siblings and ellipses.
Password Input: Sign-up passwordpassword-input-demoType to see the meter and checklist.
Plan: Exampleplan-demoSix steps with an 8-second auto-run.
Popover: Dimensions panelpopover-demoA small form with crop marks.
Progress: Bar, segments and indeterminateprogress-demoAll three styles driven by one value.
Prompt Input: Exampleprompt-input-demoWith a model selector and context meter in the toolbar.
Queue: Examplequeue-demoThree queued follow-ups.
Radio Group: Plan cards and inline radiosradio-group-demoSelectable pricing cards and a compact inline group.
Rating: Input and read-onlyrating-demoAn interactive rating and an average.
Reasoning: Examplereasoning-demoThoughts stream in, then it folds away.
Reveal: Four effects in a scroll panelreveal-demoScroll the panel: rise, wipe, blur and scale, each staggered.
Rotating Text: Hero linerotating-text-demoFour words cycling in a heading.
Scramble Text: Mount and hoverscramble-text-demoA decoding headline and a hover link.
Scroll Area: Release listscroll-area-demoA faded list of tags.
Scroll Progress: Article progressscroll-progress-demoTracks a scrolling article.
Select: Grouped optionsselect-demoTimezones in labelled groups.
Separator: Labelled, dashed and verticalseparator-demoAll three uses.
Sheet: Settings panelsheet-demoHeader, scrollable body and footer tray.
Shimmer Button: Hero CTAshimmer-button-demoA pill button with an icon.
Skeleton: Profile cardskeleton-demoAvatar, heading and paragraph placeholders.
Slider: Value bubble and rangeslider-demoA single value and a price range with ticks.
Sources: Examplesources-demoFive sources.
Spinner: Variantsspinner-demoMarks, ring and dots.
Stack Trace: Examplestack-trace-demoA TypeError with library frames folded.
Stepper: Onboarding flowstepper-demoFour steps with back and continue.
Streaming Text: Examplestreaming-text-demoA reply streaming in.
Subagent: Examplesubagent-demoOne running, one finished with tool calls inside.
Suggestions: Examplesuggestions-demoFive follow-ups.
Switch: Sizesswitch-demoSmall, medium, large and disabled.
Switch: Settings listswitch-settingsLabeled settings separated by dashed rules.
Table: Invoicestable-demoStatus badges, numeric columns and a footer total.
Tabs: Segmentedtabs-demoA full-width segmented control.
Tabs: Underline with iconstabs-underlineAn underline indicator that follows the label width.
Tag Input: Skillstag-input-demoSuggestions, paste and keyboard removal.
Task: Exampletask-demoFour items, one in progress.
Terminal: Exampleterminal-demoA test run streaming.
Test Results: Exampletest-results-demoTwo suites with one failure.
Text Reveal: Heading and paragraphtext-reveal-demoChars rising and words blurring in.
Text Shimmer: Exampletext-shimmer-demoTwo status lines.
Textarea: Auto-grow with countertextarea-demoGrows with the text and counts toward a limit.
Tilt Card: Member cardtilt-card-demoA card with a glare.
Timeline: Changelogtimeline-demoReleases with version badges.
Toast: Tones and promisetoast-demoDefault, success, error and a promise toast.
Toggle: Ghost and outlinetoggle-demoIcon toggles and a labelled outline toggle.
Toggle Group: Segmented, outline and ghosttoggle-group-demoA range picker, alignment and formatting groups.
Tool: Exampletool-demoSuccess, running and error states.
Tooltip: Toolbar with shortcutstooltip-demoIcon buttons whose tooltips show shortcuts.
Tooltip: Placementtooltip-sidesTooltips on all four sides.
Trace Waterfall: Exampletrace-waterfall-demoA support agent with a sub-agent and a retried tool.
Typewriter: Cycling phrasestypewriter-demoFour phrases in a heading.
Web Preview: Exampleweb-preview-demoA preview with custom content.