Skip to content
edmi-ui

Components

147 components and patterns for React, Vue and Svelte. Flat by default; add the elevation prop for depth.

New 6

Questionnaire
Multi-step questions with single, multiple, freeform and skippable answers and keyboard shortcuts.
Inset panel
Header and footer on a muted shell with a card body plate inset 2px from the shell. Optional bottom fade and elevation.
Message Scroller
The chat viewport: anchors each turn, follows streaming replies and offers Jump to latest.
Kanban Column
Sunken stage column with a mono header and Card items.
Layout Picker
Dashboard or navbar choice cards, plus a first-visit corner toast that saves the choice in a cookie.
Ticker Strip
Horizontal strip of price cells: avatar and symbol, mono price, up/down change.

Actions 6

Badge
Compact status label. Variants default, secondary, destructive, outline, ghost, link plus brand, warning and info, and pill/number shapes.
Button
Pressable action control, flat by default; the elevation prop adds sunken, raised and floating depth. Variants default, secondary, outline, ghost, destructive, link and brand.
Button Group
Joins related buttons, inputs and text into one control with shared borders. Horizontal or vertical, with ButtonGroupSeparator and ButtonGroupText.
Kbd
Keyboard key cap with a KbdGroup for combinations; elevation raises the key. Adapts inside tooltips.
Toggle
Two-state button. The pressed state is an accent fill with an inner shadow. Variants default and outline, sizes sm, default and lg; elevation adds depth.
Toggle Group
A set of toggles. Items are spaced 2 by default; spacing 0 joins them. Supports vertical orientation and a flat segmented track variant.

Forms · Text 9

Combobox
Searchable select (Base UI Combobox) with an input or chips trigger, showClear and multiple selection.
Field
Composes label, control, description and error into one accessible unit; vertical, horizontal or responsive.
Input
Single-line text field on the card surface with a focus halo, aria-invalid state and an elevation prop (sunken, raised, floating).
Input Group
Icons, text, buttons or keys around an input or textarea sharing one focus ring.
Input OTP
One-time code entry with individual slots, caret and paste support.
Label
Accessible label tied to a control; dims with disabled peers and Field groups.
Native Select
The browser select with an Edmi trigger skin, for mobile and long, simple lists.
Select
Custom select in a popover with groups, labels, separators, disabled items and a check on the chosen value.
Textarea
Multi-line text on the card surface with a focus halo, aria-invalid state and an elevation prop. Grows with content.

Forms · Choice 6

Calendar
Month grid for picking a date or range (react-day-picker). Elevation sits on the calendar shell; the selected day rises with it.
Checkbox
Toggle one option on or off. The elevation prop raises the checked box.
Date Picker
Popover + outline Button + Calendar. DatePicker for a single date, DateRangePicker with optional presets.
Radio Group
Pick exactly one option from a short list.
Slider
Pick a value or range by dragging. Array value: 1 single, 2 range, 3+ multiple thumbs.
Switch
Instant on/off for a setting. Brand-colored when on; sizes default and sm.

Display 11

Aspect ratio
Locks content to a ratio so layouts do not jump while loading.
Attachment
A file or image with metadata, upload state and actions. States idle, uploading, processing, error, done.
Avatar
Image with an initials fallback. Sizes sm, default, lg; badge, group and count.
Card
Flat surface with optional elevation (sunken, raised, floating). Header, title, description, action, content and footer; size default or sm.
Empty
What to show when there is nothing yet. Icon media, title, description and actions; dashed outline.
Inset panel
Header and footer on a muted shell with a card body plate inset 2px from the shell. Optional bottom fade and elevation.
Item
Flexible row with media, title, description and actions. Variants default, outline, muted; sizes default, sm, xs.
Progress
Shows how far a task is. Label and value parts; brand variant.
Separator
A thin line between groups. Horizontal by default, vertical inside rows.
Skeleton
Placeholder in the shape of content while it loads. Match real sizes to avoid layout shift.
Spinner
Shows that something is loading. Inherits color and sizes with the surrounding text.

Overlays 9

Alert
Inline message in the page flow. default, destructive plus brand, warning and info soft-fill variants.
Alert dialog
Blocking confirm for destructive or irreversible actions. No close icon; clicking outside does nothing.
Dialog
Modal window for a focused task on a --overlay scrim, with optional elevation. showCloseButton on the content.
Drawer
Base UI drawer: swipeDirection, snapPoints, DrawerSwipeHandle.
Hover card
Preview of what is behind a link, opened on hover after a short delay.
Popover
Rich content in a floating panel opened by a button. Optional elevation (raised, floating). PopoverHeader, PopoverTitle, PopoverDescription.
Sheet
Dialog that slides in from an edge (side top, right, bottom, left).
Sonner
Toast via Sonner: default, success, info, warning, error, loading, promise. Soft fill and tinted border per type.
Tooltip
Short label on hover or focus. Solid primary chip with a small arrow.

Navigation 9

Breadcrumb
Hierarchy trail: list, items, links, current page, separator and ellipsis.
Command
Command palette (cmdk): input row, groups, items with mono shortcuts, empty state and a dialog form for ⌘K.
Context Menu
Right-click menu with the same anatomy and recipe as the dropdown menu.
Dropdown Menu
Menu opened by a button: items (default, destructive), checkbox and radio items, labels, shortcuts and sub-menus.
Menubar
Persistent row of menus; items have a destructive variant.
Navigation Menu
Top-level links with rich dropdown panels for the navbar layout.
Pagination
Page navigation built from Edmi buttons: active page outline, previous/next and ellipsis.
Sidebar
App frame sidebar: variants sidebar, floating, inset; collapsible offcanvas, icon or none; either side. Groups, menus, sub-menus, badges, rail and trigger.
Tabs
Tabs in a flat, sunken track (variant default) or underlined (variant line). Horizontal and vertical.

Layout 7

Accordion
Stacked headings that each open a section; one at a time by default, multiple for many.
Carousel
Swipeable slides built on Embla, with arrows and position dots.
Collapsible
A single panel that expands and collapses.
Direction
DirectionProvider and useDirection for LTR / RTL layouts.
Elevation
ElevationProvider and useElevation: the v4 elevation plumbing (sunken, flat, raised, floating) with a layered mode.
Resizable
Panels the user can resize by dragging a handle.
Scroll Area
Custom thin scrollbars over native scrolling.

Data 3

Chart
Recharts wrapped in ChartContainer that maps series to --chart-1…5, with the floating Edmi tooltip (dot, line, dashed, none), legend, scoped validated dark palette and ✦ ChartStatWell.
Data Table
TanStack Table v9 data table: filter input, faceted filters, sortable column headers, column visibility, row selection, row actions and pagination.
Table
Plain styled HTML table. Numbers are mono and right-aligned (numeric, trend); the footer holds totals.

Charts 7

Area Chart
Filled lines for totals over time: a 6-26% wash of the series hue under a 2px line, in natural, linear and step curves, stacked and expanded.
Bar Chart
Compare magnitudes across categories: capped 24px bars, a 4px rounded data end and a square baseline.
Chart Tooltip
ChartTooltipContent: a floating surface listing every series at the hovered position, with optional indicator, label and formatter.
Line Chart
Trend over an ordered axis: interactive range chart, curve types, multiple series, dots, coloured dots and labels.
Pie Chart
Pie and donut charts: separator, label, custom label, label list, legend, active slice, centre text and stacked rings.
Radar Chart
Radar charts: dots, lines only, custom labels, grid variants and multiple series.
Radial Chart
Progress or share on concentric arcs with round caps, a neutral track and the headline number in the centre.

Conversation 5

Bubble
Conversational content in a bubble: seven variants, start/end alignment, grouping and floating reactions.
Marker
Inline status, system note, bordered row or labeled separator inside a conversation.
Message
A chat row: avatar, header, content and footer, top-aligned and mirrored with align.
Message Scroller
The chat viewport: anchors each turn, follows streaming replies and offers Jump to latest.
Questionnaire
Multi-step questions with single, multiple, freeform and skippable answers and keyboard shortcuts.

✦ Patterns 19

Agent Card
AI agent card with a deterministic 5x5 identicon, badges and a stat row.
Allocation Bar
Proportional weights bar with a legend of labels and mono percentages.
App Header
App top bar for the navbar layout: brand, nav pills, search, network button and wallet connect.
Code Block
Card with mono code, optional line highlight and a copy button.
Feature Row
Numbered feature row on a card with a trailing icon; expands when given content.
Feed Post
Social post card: avatar header, body, attached index item and stat row.
Index Row
Market table row: avatar stack, name, ticker and tags, mono price, delta and sparkline; includes a matching header row.
Join Panel
Amount input with Max and currency, summary rows and a primary join action.
Kanban Column
Sunken stage column with a mono header and Card items.
Layout Picker
Dashboard or navbar choice cards, plus a first-visit corner toast that saves the choice in a cookie.
Leaderboard Podium
Top-three podium cards with rank badges and avatars; first place stands taller in the middle.
Pricing Plan
Plan card with title, price, call to action and a check list.
Site Footer
Site footer: brand, link columns, social slot and legal line.
Site Header
Marketing top bar for the navbar layout: brand, stepped lead-in list, links and one call to action.
Stat Tile
KPI tile with a mono value and delta badge, an optional segmented meter, and a stat strip for grouped numbers.
Step Card
Numbered step card with a corner icon, title and description.
Task List
Agent tasks grouped by status badge (ready to review, running, completed).
Ticker Strip
Horizontal strip of price cells: avatar and symbol, mono price, up/down change.
Watchlist Item
Compact sidebar row with a colored letter tile, symbol, mono price and change.

AI · Chat 8

Attachments
Files and images attached to a message or prompt: grid, inline and list layouts with preview and remove.
Context
Context window usage ring with a hover card of token and cost breakdown.
Conversation
Chat viewport built on the message scroller: follows streaming replies, empty and home states, scroll-to-latest and transcript download.
Message
One chat turn: secondary user bubble or full-width assistant response with markdown typography, actions, branches and toolbar.
Model Selector
Searchable model picker in a command dialog, with provider logos and grouped lists.
Prompt Input
The composer: auto-growing textarea, attachments, header and footer tools, model and mode pickers, submit with streaming status.
Shimmer
Animated sweep over streaming or loading text; used for status lines inside a ghost bubble.
Suggestion
Suggested prompts as pills in a scrollable row, with a card variant for the home state.

AI · Agent 10

Chain of Thought
Step-by-step reasoning timeline with search results and images per step.
Checkpoint
Marks a point in the conversation with a restore action.
Confirmation
Tool approval request with request, accepted and rejected states.
Inline Citation
Inline source chip with a hover card that pages through the sources.
Plan
Plan card with streaming title and description and collapsible steps.
Queue
Queued messages and todos in collapsible sections with status dots.
Reasoning
Collapsible thinking block that streams while the model reasons and closes itself when done.
Sources
Collapsible list of the sources a response used.
Task
Collapsible task row with file chips.
Tool
Tool call card with a state badge, collapsible input parameters and output or error.

AI · Code 8

Agent
Agent configuration card: model, instructions, tools and output schema.
Artifact
Container for generated output with a header, actions and scrollable content.
Code Block
Syntax-highlighted code with header, copy, language select and line numbers. The canonical code block for the kit.
Commit
Commit summary: message, hash, author, timestamp and changed files.
Environment Variables
Environment variable list with masked values, visibility switch and copy.
File Tree
Expandable file and folder tree with selection.
JSX Preview
Live preview of streamed JSX or template markup that tolerates unclosed tags.
Package Info
Package name, version change and dependency list.

AI · Runtime 7

Sandbox
Code execution sandbox: state header with tabs for code and output.
Schema Display
API endpoint with method badge, path, parameters and nested request and response schemas.
Snippet
One-line command or value with a copy button.
Stack Trace
Collapsible error stack with file links and internal frame filtering.
Terminal
Streaming terminal output with ANSI colors. Always dark, never themed.
Test Results
Test run summary with progress, suites and failing test details.
Web Preview
Browser frame with navigation, URL bar, iframe body and console.

AI · Voice 6

Audio Player
Audio player on media-chrome: play, seek, time, mute and volume, styled as an Edmi card with Edmi buttons.
Mic Selector
Microphone picker: outline trigger, searchable popover list, cleaned-up device names with the hardware id muted.
Persona
Animated agent persona (Rive) reacting to idle, listening, thinking, speaking and asleep states.
Speech Input
Dictation button using the Web Speech API (MediaRecorder fallback) with listening and processing states; supports raised.
Transcription
Time-synced transcript: the active segment is highlighted, past is muted, future is dimmed, click a segment to seek.
Voice Selector
Voice picker dialog with search, grouped voices, attributes, descriptions and a preview play button.

AI · Workflow 9

Canvas
Workflow canvas on xyflow (React Flow, Vue Flow, Svelte Flow) with the dotted Edmi background.
Connection
Connection line shown while dragging a new edge.
Controls
Zoom and fit controls for the workflow canvas.
Edge
Animated and temporary edges for the workflow canvas.
Image
Displays an AI-generated image from base64 or bytes.
Node
Workflow node card with header, content, footer and source/target handles.
Open In Chat
Dropdown that opens a prompt in ChatGPT, Claude, T3, Scira, v0 or Cursor.
Panel
Canvas overlay panel positioned in a corner of the workflow.
Toolbar
Floating toolbar attached to a selected node.

AI · Patterns ✦ 8

Agent Avatar
5 by 5 pixel identicon generated from an agent id, tinted with a chart color.
Artifact Card
File card for generated output: paper thumbnail, format meta, split Download and a generating state.
Artifact Stack
A group of artifact cards with a Download all action.
Artifact Viewer
Side panel that shows one artifact: title and format, open-in, download, expand and close; documents render as paper.
Chat Composer
Prompt input with the outside footer: attach, speech, disclaimer, model with effort, and mode.
Chat Header
Conversation header: title, agent or model, share and more actions.
Prompt Input Agent
Agent composer: agent chip, @ mention list and send button.
Session Panel
Chat side panel: Progress, Outputs with preview and file list, and what was used in this session.