Super-AI-Components
The missing half of AI Elements — components for AI applications.
npx shadcn@latest add https://super-ai-components.vercel.app/r/<name>.jsonRequires a shadcn app on Base UI (style base-nova). Radix-based styles such as new-york fail to typecheck: these components use Base UI's render prop and callbacks like onOpenChangeComplete, which Radix primitives do not have.
133 of 133 items
A · Primitives 12
- KbdKeycap chip for keyboard shortcuts.
- Cost ChipPer-action credit cost chip (e.g. 17 credits, 900 credits/min).
- Date SectionDate-grouped section header for lists and grids.
- Choice ChipsRing-selected chip group for visual and numeric parameters.
- Filter BarCategory chips, add-filter chip, and filters button.
- Field RowLabel + control inspector row with unit-suffixed value input.
- Gen Settings BarCompact model/aspect/resolution/duration/batch strip.
- Preview TileFixed-aspect media tile with label, badge, selection ring and states.
- Entity RowIcon, title, description and trailing slot in a fixed-height row.
- Stat ReadoutCompact key/value metadata; copyable values, em-dash for absent ones.
- Reset AffordanceThe reset control beside every editable value; row and group scope.
- Section HeaderGroup title with optional count, action and collapse.
B · App shell & navigation 8
- App SidebarAssembled product sidebar
- Workspace SwitcherAvatar/logo + name dropdown
- Sidebar NavSectioned icon+label nav
- Modality RailVertical icon+label tool switcher for editors
- Promo CardSidebar CTA card
- Thread ListDate-grouped conversation list with rename, delete, and pin.
- App TopbarBreadcrumb + title + status + actions
- Account MenuAvatar menu with nested appearance submenu
C · Home & launcher 5
D · Composer & context 7
- Media Prompt BarThe media-gen omnibox
- Reference StripTyped attachment slots above the prompt
- Context ChipsRemovable entity/range/file references
- Mode TabsAsk/Design/Build · Chat/Cowork · Standard/Director
- Quote ReplySelect content → quoted block in composer
- Skill MenuSelect-with-preview menu of agent skills
- Slot SummaryWhat the system understood, before it acts
E · Generation & parameters 10
- Generation PanelThe left config column of a tool app
- Model PickerChoose a model; drives dynamic settings
- Parameter PanelGeneration params with plain-language ends
- Preset GridVisual preset chooser with labelled thumbnails
- Run ButtonTrigger + cost + progress in one control
- Generation QueuePending slots with progress
- Member Gate RowFeature row locked behind a plan
- Generation WizardMulti-step generate dialog
- Tts ComposerScript editor with per-segment voice, emotion, speed
- Voice Clone RecorderGuided sample recording
F · Results & assets 7
- Result CardOne generated asset, anywhere it appears — the same box from queued through done, failed or locked.
- Generation GridBatch gallery of results — density is a prop, select mode replaces hover actions, empty is a tile.
- Asset DetailLightbox: media + provenance rail
- Action StackCross-tool handoff on a result
- Compare ViewerLabelled panes
- Render QueueStaged jobs: inputs → preview → export
- Approval CardSingle-artifact approval
H · Timeline & transport 7
I · Editor surfaces 5
J · Library, filtering & discovery 7
K · Documents & knowledge 8
- Ai Doc BlockGenerated text block inside a document
- Inline Generate PopupClick empty space → prompt popover
- Diff ReviewTrack changes with per-change rationale
- Selection ToolbarThe ✨ menu on selected text
- Source PanelIngested sources with pipeline status
- Citation RefInline citation → source popover
- Answer BlockGrounded answer with citations at the claim
- Source CardsThe retrieved set behind an answer
L · First-run & onboarding 6
M · Account, plan & monetization 7
N · Feedback, trust & observability 12
- FeedbackThumbs / stars + reason popover
- Trust DialogConfirm running third-party content
- Disclaimer Note"AI can make mistakes" footnote
- Trace TimelineWaterfall of steps / tool calls / LLM calls
- Run InspectorSpan detail: I/O, tokens, cost, errors
- Usage DashboardAggregate cost / token / latency
- Env StatusPer-provider reachability
- Permission PromptAgent asks before a side effect
- Autonomy SelectorHow much the agent may do unasked
- Safety BlockA request or response stopped by policy
- Escalation HandoffAgent hands the conversation to a person
- Task TrayWork that outlives the view that started it
O · Blocks 13
- Home ShellApp Home / launcher
- Chat ShellChat / agent workspace
- Studio ShellCreative studio editor
- Timeline ShellTimeline-dominant editor (variant of O3)
- Generation ShellSingle-purpose tool app
- Library ShellPersonal archive
- Explore ShellCommunity gallery
- Artifact ShellArtifact / document index
- Records ShellProject / scenario list
- Docs ShellDocumentation
- Settings ShellFull-page settings
- Notebook ShellThree-pane sources ‖ chat ‖ outputs
- Auth ShellSign in / sign up