CUI

Components

Every component of CUI, each with a live example, its options and what it does with the keyboard.

Basics

  • Text: Headings, body text, labels, links and inline code, with wrapping that avoids a lone last word.
  • Icons: The Lucide icon set embedded as a font, used by name through CUI_ICON_* constants.
  • Badge, avatar and keycap: Small labels: a badge for a status or a count, an avatar for a person, and a keycap for a keyboard key.
  • Card and metric: A card is a surface that groups content. A metric shows one number with its change and an optional sparkline.
  • Image: Shows a picture loaded from a file or made from your own pixels.

Actions

  • Button: Starts an action when clicked. It comes in six variants and three sizes, with an optional icon and a loading state.
  • Icon button: A round button with only an icon, ghost by default.
  • Button group, copy and hold to confirm: Three small helpers for actions: buttons joined into one group, a button that copies text to the clipboard, and a button that must be held to fire.
  • Split button: A main action with a menu of related actions behind a chevron.
  • Toggle group: A row of joined toggle buttons, each on or off, or exactly one on at a time.
  • Confirm button: A button for destructive actions that asks for a second click before it fires.
  • Status button: A button that shows the progress of the work it started: a spinner while busy, then a check or an error.
  • Reactions: Reaction buttons with a count each, as under a message or a post.
  • Speed dial: A round floating button that fans out a few related actions.
  • Theme switcher and toggle: Controls that switch the app between light, dark and the system theme.
  • User menu: An avatar, a name and a detail line that open an account menu with a header.
  • Swipe actions: A row that slides sideways to reveal actions such as archive or delete.

Inputs

  • Text field: A single-line field that edits text in a buffer you own, with a label, an icon, a hint and an error. The search field is a variant.
  • Text area: A multi-line text field that wraps and scrolls.
  • Number field: A field for a number in a range, typed or stepped with its buttons and the arrow keys.
  • Tag input: A field that turns typed words into removable chips, kept as a comma separated list.
  • One time code: A row of boxes for a verification code, filled by typing or pasting.
  • Password strength: A meter under a password field that scores the password from too short to strong.
  • Inline edit: Text that turns into a field when clicked, for renaming things in place.
  • Scrub field: A number you change by dragging sideways on it, as in design and 3D tools.
  • Money field: A field for an amount of money, with a currency symbol and grouped digits.
  • Prefix and suffix: Fixed text before or after a field's value, such as https:// or a unit.
  • Shortcut recorder: A field that records a key combination, for settings where people choose their own shortcuts.
  • Dropzone: An area that takes files dropped from the desktop, and can open the system file dialog on a click.
  • Avatar upload: A profile picture you replace by dropping an image on it.
  • Signature pad: A box to sign in with the pointer or a finger, with strokes you can read back.

Selection

  • Segmented control: A compact set of two to five choices where one is always selected, for switching between views of the same content.
  • Checkbox, switch and radio: The three basic choices: a checkbox for an option, a switch for a setting that applies at once, and radio buttons for one of several.
  • Slider: Picks a number, or a range with two thumbs, by dragging along a track.
  • Chips and rating: A chip is a small toggle for filters and tags. A rating picks a number of stars.
  • Radio cards: One choice out of a few, shown as cards with a title and a line of explanation each.

Pickers

  • Select and combobox: Picks one item from a list that opens under the field. With search it becomes a combobox.
  • Date picker and calendar: Picks a date from a month grid, as a field that opens a calendar or as a calendar shown inline.
  • Color picker: A swatch that opens a saturation and brightness square, a hue bar and preset swatches.
  • Multi-select: Picks several items from a list and shows them as chips in the field.
  • Date range picker: Picks a start and an end date, with presets such as the last 7 days.
  • Time picker: Picks a time of day from scrolling columns of hours and minutes.
  • Wheel picker and time dial: Touch-style pickers: drums of options you spin, and a clock face for setting a time.
  • Ruler and histogram sliders: Two sliders that show context: a ruler that slides under a fixed marker, and a range slider drawn over the distribution of the data.
  • Knob, fader and level meter: A rotary knob, a vertical fader and a level meter: the controls of audio, synth and mixer panels.
  • Emoji picker: A searchable grid of every emoji in nine groups, with the recently used ones first.

Navigation

  • Tabs: Switches between views with a row of labels and an underline that slides to the active one.
  • Sidebar navigation: The items and section titles of an app's sidebar, with one highlight that follows the selection.
  • Breadcrumb, pagination and stepper: Three ways to show position: the path to a page, the page of a list, and the step of a process.
  • Table of contents: A list of a page's sections that follows the reader and scrolls to a section when clicked.
  • Menu bar: The File, Edit, View row of a desktop app, with a menu under each title.
  • Toolbar: A row of small buttons, toggles and separators for an editor's most used commands.
  • Document tabs: Closable tabs for open documents that can be dragged into a new order, as in an editor.
  • Status bar: The thin bar at the bottom of a window for state, counts and background progress.
  • Docking: Panels the user arranges by dragging: split, tabbed and resized, with a layout you can save and load.

Overlays

  • Dropdown and context menu: A menu of commands that opens from a button, or at the pointer on a right click.
  • Popover: A small floating panel anchored to a control, for content that does not need a dialog.
  • Tooltip: A short label that appears when the pointer rests on a control.
  • Dialog: A modal window for a decision or a short form, which blocks the rest of the app until it is closed.
  • Sheet: A panel that slides in from an edge.
  • Command palette: A search box over the app's commands, opened with a shortcut.
  • Hover card: A preview card that opens when the pointer rests on a link, a button or another component that reacts to the pointer.
  • Confirm popover: A small question anchored to the button that opened it.
  • Expandable text and card: Long text clamped to a few lines with a Show more link, and a card that opens to show its details.
  • Guided tour: A spotlight on one control at a time, with a card beside it saying what the control does, for onboarding and "what's new".

Feedback

  • Toast: A short message that appears in a corner and goes away by itself, with an optional action.
  • Alert: An inline message in a tone of information, success, warning or danger, which can be dismissed.
  • Progress, meter, spinner and skeleton: Ways to show waiting and amounts: a progress bar, a meter against a limit, a spinner, a gauge and placeholder shapes for content that is loading.
  • Empty state: What to show where there is nothing yet: an icon, a title, a line of help and an action.
  • Banner and countdown: A full-width announcement that can be dismissed, and a countdown to a moment in time.
  • Onboarding checklist: A card with a progress ring and steps; the first unfinished step opens to show its description and action button.
  • Undo toast: A toast with an Undo action and a visible timer, for actions that can be taken back.

Data display

  • Table: Rows and columns of your data, with sortable headers, selectable rows and any component in a cell.
  • List and tree: List rows with an avatar or an icon, a title and a detail line, and a tree of items that fold.
  • Accordion: Sections that fold open and closed under their headers.
  • Timeline and progress ring: A vertical list of events in order, and a ring that fills with a percentage.
  • Reorderable list: A list whose rows the user drags into a new order.
  • Data grid and filter bar: A grid for very large data with sticky headers, resizable and sortable columns and editable cells, and a bar of filters to go with it.
  • Tree table and path bar: A tree with columns, as in a file explorer or a debugger's variables, and a path bar for moving up through folders.
  • File browser and picker: A folder view with sorting and navigation, and the open and save dialogs built from it.
  • Code block: Read-only source code with syntax highlighting, optional line numbers and a copy button.
  • JSON viewer: JSON shown as a tree that folds, with a color for each type of value.
  • Markdown view: Renders markdown text as native content: headings, lists, tables, code, task lists and links.
  • Code editor: An editable code field with syntax highlighting, for shader editors, script consoles and config files.
  • Diff viewer: Compares two versions of a text line by line.
  • Property inspector: A panel of named properties in folding groups, each edited with the control that fits its type.
  • Log console: A log view for many thousands of lines, with level filters, search, follow and copy.
  • Terminal: Output over an input line, for build logs, a game console or a REPL.
  • Hex viewer: The bytes of a file or of memory in hex and ASCII, for binary tools, emulators and debuggers.
  • Flame graph: A profiler timeline: time runs left to right and call depth top to bottom, so each span sits in the row of its depth, under its parent.
  • Curve editor: Keyframes on a plot, for easing, animation timing and response curves.
  • Gradient editor: A color ramp with its stops underneath, over a checkerboard so transparent stops read as transparent.
  • Timeline editor: A dope sheet for animation, video and audio tools: tracks, a time ruler and keys you can move.

Charts

  • Charts: Line, bar and donut charts and sparklines, with axes, a crosshair and a tooltip on hover.
  • Heatmap: A grid of cells colored by value, for one category against another.
  • Calendar heatmap: A year of days as small squares colored by activity.
  • Treemap and radar: A treemap shows the parts of a whole as rectangles sized by value. A radar chart compares items across several axes.
  • Funnel, split bar and waffle: Three charts for shares: a funnel for the steps of a conversion, a single bar split into parts, and a waffle of 100 squares.
  • Sankey: Flows between stages, drawn as ribbons whose width follows the amount.
  • Bar list and activity rings: A ranked list with a bar behind each row, and concentric rings that fill toward a goal.
  • Scatter and bubble: Points on two axes, with an optional third value as the size of each bubble.
  • Radial gauge: One value on a dial, for dashboards: speed, load, temperature, a score against a goal.
  • Candlestick chart: Open, high, low and close per period, for prices.

Planning

  • Kanban board: Columns of cards the user drags between stages.
  • Week calendar: A week of timed events on a day grid, which can be moved and resized by dragging.
  • Month calendar: A month grid with the events of each day, for schedules and planners.
  • Gantt chart: A task list on the left and a timeline that scrolls sideways, with months, day numbers and shaded weekends.
  • Node editor: A canvas of nodes joined by curved links, for shader graphs, audio patching or visual scripting.

Conversation and media

  • Chat: Message bubbles for a conversation, with grouping, dividers and a typing indicator.
  • Comments: A comment with its author, time, replies indented under it and a like button.
  • Presence, counter and ticker: Small live pieces: who is here now, a number that rolls when it changes, and a line of text that scrolls past.
  • Carousel: A strip of slides the user drags or steps through, one at a time.
  • Image compare and card stack: A divider that reveals one picture over another, and a stack of cards the user swipes through.
  • Image viewer and cropper: A picture you can zoom and pan, and a crop tool with a frame you drag.

Motion

  • Text effects: Animated text: a shimmer, a typewriter, words that rotate in place and text that reveals itself.
  • Rolling numbers: A number whose changed digits roll into place.
  • Gradient text and spotlight cards: Text filled with a gradient, and a card with a glow that follows the pointer.
  • Loaders: Animated indicators for work in progress, in five styles.
  • Dock: A row of icons that grow under the pointer, as in a desktop dock.
  • Control tiles: Large toggle tiles for quick settings such as Wi-Fi or Do not disturb.
  • Now playing, waveform and tab bar: A media player card, an audio waveform to scrub through, and a bottom tab bar for phone layouts.

AI interfaces

Developer tools

  • Key-value editor: Rows of key and value fields for HTTP headers, query parameters or environment variables.
  • Problems panel: Compiler and linter output grouped by file, with each file's count.
  • Pipeline: A CI or CD run: each stage is a column of its jobs with their status and duration, and connectors run between the stages.
  • Query builder: A filter built from conditions joined by all or any, in groups that nest.
  • Schedule picker: A cron schedule edited through plain choices instead of the expression, with the next runs listed.
  • Keymap: A keyboard with the shortcuts on it.
  • Commit graph: Version history with its branch lanes.
  • Dependency graph: Nodes and directed edges laid out in layers, for build targets, packages, services or call graphs.
  • Network waterfall: HTTP requests as a table with a timing bar each.
  • Trace viewer: A tracing timeline in the manner of a performance panel.
  • Regex tester: A pattern, its flags and a test text, with every match and group highlighted.
  • Test explorer: Test results as a tree of suites and tests, each with its status and time.
  • Stack trace: An exception with its call stack.
  • HTTP request bar: The method, the URL and Send, as in an API client.
  • Uptime bars: A status page: each service's current state and a bar for each day of its history.
  • Time histogram: Event counts over time, stacked by series, as above a log search, with a legend that shows each series' total.
  • Coverage: Test coverage as a tree built from the files' paths.
  • Blame: Source with who last changed each line.
  • Feature flags: Flags against environments, edited in place.
  • API explorer: The endpoints of an API grouped by tag, each opening to show its parameters.