Beautiful UI

Beautiful UI

Beautiful UI is a curated catalog of nineteen copy-paste components for AI-native interfaces, designed to cover everything an AI agent needs to communicate with humans clearly and elegantly. Created by Turbo, a product design studio, each primitive in Beautiful UI is extremely crafted, demoed live on the site, and free to use in your own projects.

The catalog is organized by the job each component performs. Conversation primitives include Loading State (pixel-grid loader with shimmer and elapsed time), Thinking (expandable traces for steps, reasoning, search, and coding), Streaming Text (streamed answers with inline sources, actions, and follow-ups), Chat (tabbed panel with reasoning replies and a composer), and Prompt Bar (composer with @ sources, / commands, a model picker, and dictation). For decision moments, Beautiful UI provides the Approval Card for human-in-the-loop questions and the Recommendation Card with a confidence meter, alternatives, and Accept actions.

Data and work visualization are equally well covered. Tool Chips render code edits and tool calls as compact chips; Task Rows show live agent task status with counts; Context Cards display retrieved knowledge chunks with their sources; Diff Table sweeps AI-proposed edits through tabular data with inline category and supplier changes; Records Table offers a CRM-style grid with tags and connection strength; Filter Table reorganizes live data with status chips; and Insight Cards page through agent insights with scrub-ready charts. Around all of this, Beautiful UI includes Sidebar Nav, command Search, Code Block for streaming agent-written TypeScript, Fine-tune Card for inspector-style adjustments, and Selection Actions for passage-level rewrite prompts.

Whether you are building a chatbot, a coding agent, or an AI dashboard, Beautiful UI gives you production-quality primitives you can paste in and ship today.