Beautiful UI for AI-native interfaces

A new design system for AI-native interfaces showcases 16 UI components, including pixel-grid loaders, expandable reasoning traces, streaming text with inline sources, human-in-the-loop approval cards, tool chips, task rows, tabbed chat, prompt bars with @ sources and / commands, recommendation cards with confidence meters, context cards, diff tables, records tables, filter tables, command search, insight cards with live charts, code blocks, fine-tune cards, and selection actions. The components are designed to support agentic workflows, with examples drawn from a fictional ice cream shop's data, such as mint chip sales up 12% and rocky road down 6% or -$2,453.44. The system is offered as copy-paste ready primitives for developers building AI-native interfaces.

Loading State Pixel-grid loader with shimmer and elapsed time. Thinking Expandable traces — steps, reasoning, search, coding. Streaming Text Streamed answer with inline sources, actions, and follow-ups. Approval Card Human-in-the-loop questions the agent asks before acting. Tool Chips Code edits and tool calls as compact chips. Task Rows Live agent task status — running, failed, completed. Chat Tabbed chat panel with reasoning replies and a composer. Pulled 3 summers of mint chip sales for comparison. Mint chip is up 12% with stronger weekend peaks. Prompt Bar Composer with @ sources, / commands, model picker, and dictation. Recommendation Card Agent suggestion with a confidence meter and actions. Reorder waffle cones from cone king with lead time 7 days . Other options Context Cards Retrieved knowledge chunks with their sources. Cold-chain certification must be verified before a new dairy can be added to the reorder workflow. Q4 velocity table: pistachio +18%, vanilla +6%, rocky road -11%; retire flavors below 40 scoops weekly. Diff Table AI-proposed edits sweeping through tabular data. | Flavor | Category | Supplier | |---|---|---| | Rocky Road | Classic | aurora-scoops | | Bubblegum | Retro | kumo-creamery | | Mint Chip | Classic | maple-orbit | PistachioSeasonalmaple-orbit | Records Table CRM-style grid with tags, sorting, and relationship status. Filter Table Status chips that reorganize live data. Search Command search with live filtering and an empty state. Insight Cards Paged agent insights with scrub-ready live charts. The worst performer in your @Creamery is Rocky Road — down -6% or -$2,453.44 . -$2,377.66 +$617.22 Code Block Agent-written code streaming in line by line. Fine-tune Card The agent adjusts design properties in an inspector. Layout Selection Actions Highlight a passage and hand it to the agent to rewrite. Pistachio holds the top slot all weekend. Churn it first thing Saturday so the batch has time to firm up before the afternoon rush. New components, in your inbox. Get new primitives and updates as they ship — copy-paste ready. No spam, unsubscribe anytime.