Component catalog

Find components by type and feeling. Explore live examples, shortlist your options, and copy your picks to your agent.

Try:

Show

Filter by feeling, motion, usage or library · 1 active

Feel

Motion

Use as

Source

40 total results · 31 with visual previews · 9 on source sites

loop · state — subtle
Agent status
Inline or avatar-size agent activity indicator: libraries.dev thinking-orbs + shimmering verb + detail line.
ocRefinedFuturisticCalmSource
state — subtle
Chat thread
AI conversation view: user bubbles, assistant turns with markdown-ish text + code blocks, tool-call chips, copy/vote/regenerate actions, @oc/agent-status while pending. Auto-sticks to bottom.
ocCalmRefinedSource
Empty state
Zero-data / first-run placeholder: layered icon, title, one primary next step, optional secondary + help link. Dashed drop-zone or plain.
ocCalmWarmSource
FAQ
FAQ section on the shadcn accordion: heading left / questions right (split) or centred single column (stacked).
ocCalmTrustworthySource
Features · List
Icon + title + text feature rows in a 2- or 3-column grid, or heading-left/list-right with columns={1}. Calmer alternative to feature-bento.
ocCalmMinimalTrustworthySource
Prompt composer
Chat input: auto-growing textarea, file attachment chips, model picker, web-search toggle, send/stop; Enter sends, Shift+Enter newline; optional suggestion chips.
ocRefinedCalmSource
loop · state — subtle
Template · AI chat
Starter page → app/chat/page.tsx. Use existing compatible tokens, or install a theme only when requested; it pulls in 4 @oc blocks. Preview: /templates/template-ai-chat.
ocCalmRefinedFuturisticSource
Editorial (design system)
Writes DESIGN.md to the project root + theme tokens + fonts. Read design-systems/editorial/DESIGN.md first.
ocEditorialWarmCalmSource
Soft Glass (design system)
Writes DESIGN.md to the project root + theme tokens + fonts. Read design-systems/soft-glass/DESIGN.md first.
ocWarmCalmPlayfulSource
enter — subtle
Blur Text
Words blur-in one by one (motion). Inherits colour; lighter than SplitText (no GSAP).
react-bitsRefinedCalmSource
loop — subtle
Ai Loader
Three small AI waiting indicators (dots, sweep bar, 3×3 pixel grid) sharing one cycle length so they can be mixed on a page, with an optional elapsed-seconds counter, aria-live and an sr-only label. Drawn in currentColor — set the text colour and it follows the theme. Lighter than canvas orbs for inline 'working…' states; use oc/agent-status for the primary agent indicator.
smoothuiCalmMinimalTechnicalSource
loop — subtle
Skeleton Loader
Wrap real content in <Skeleton loading> and it renders an invisible copy with a pulsing overlay of exactly the same size — no hand-sized placeholder boxes, zero layout shift when data lands. No deps; bg-muted-foreground/20 + Tailwind animate-pulse. Does NOT honour reduced motion — add motion-reduce:animate-none. Pair with transitions/skeleton-reveal for the crossfade out.
smoothuiMinimalCalmSource
enter · state — subtle
Approval Card
Human-in-the-loop 'agent wants to do X — approve?' card. Requires the Beautiful UI foundation.css, which redefines --accent (collides with shadcn).
beautifuiCalmRefinedSource
state · enter — subtle
Chat
Tabbed chat panel with reasoning replies + composer. Requires the Beautiful UI foundation.css, which redefines --accent (collides with shadcn).
beautifuiCalmRefinedSource
enter · state — subtle
Diff Table
Row-level diff table for agent-proposed data changes. Requires the Beautiful UI foundation.css, which redefines --accent (collides with shadcn).
beautifuiTechnicalTrustworthyCalmSource
enter · drag — subtle
Flowchart
Lightweight flow diagram for agent plans/pipelines. Requires the Beautiful UI foundation.css, which redefines --accent (collides with shadcn).
beautifuiOrganicCalmRefinedSource
state · press · loop — subtle
Prompt Bar
Bottom prompt bar with attachments/actions. Requires the Beautiful UI foundation.css, which redefines --accent (collides with shadcn).
beautifuiCalmRefinedSource
state · enter — subtle
Streaming Text
Token-by-token streaming text with caret. Requires the Beautiful UI foundation.css, which redefines --accent (collides with shadcn).
beautifuiCalmRefinedSource
state · loop — subtle
Task Rows
Agent task list rows with status. Requires the Beautiful UI foundation.css, which redefines --accent (collides with shadcn).
beautifuiTrustworthyCalmRefinedSource
state · loop — subtle
Thinking
Expandable reasoning/search/coding traces — the best open-source 'agent is thinking' panel. Requires the Beautiful UI foundation.css, which redefines --accent (collides with shadcn).
beautifuiOrganicTrustworthyCalmSource
enter · hover — subtle
Tool Chips
Compact chips for tool calls an agent made. Requires the Beautiful UI foundation.css, which redefines --accent (collides with shadcn).
beautifuiTechnicalCalmRefinedSource
Code Block
A line-numbered listing and a unified diff.
beautifuiTechnicalCalmRefinedSource
enter — medium
Context Cards
Retrieved knowledge chunks with their sources.
beautifuiCalmRefinedSource
Filter Table
Status chips that reorganize live data.
beautifuiTrustworthyCalmRefinedSource
cursor · drag — medium
Fine-tune Card
The agent adjusts design properties in an inspector.
beautifuiCalmRefinedSource
cursor · press — medium
Insight Cards
Paged agent insights with scrub-ready live charts.
beautifuiCalmRefinedSource
enter — medium
Recommendation Card
Agent suggestion with a confidence meter and actions.
beautifuiCalmRefinedSource
state — subtle
Records Table
CRM-style grid with tags, sorting, and relationship status. Then add `@import "./beautifui/records-table.css";` to your app's globals.css.
beautifuiTrustworthyCalmRefinedSource
enter — medium
Search
Command search with live filtering and an empty state.
beautifuiTrustworthyCalmRefinedSource
loop · press — subtle
Selection Actions
Highlight a passage and hand it to the agent to rewrite.
beautifuiCalmRefinedSource
state · hover — medium
Sidebar Nav
Collapsible workspace and chat navigation with gliding hover states. Then add `@import "./beautifui/sidebar-nav.css";` to your app's globals.css.
beautifuiFuturisticTrustworthyCalmSource