# SoloKit

> React UI for AI products. 90 components, blocks and docs for chat, checkout, auth and documentation. Each piece is one or more TSX files you install with the shadcn CLI. Styles use Tailwind. Light mode, dark mode and a theme editor are included.

The component library is free to copy. The Next.js template is a separate starter with auth, payments, chatbot and docs already wired together.

## How to add an item

- Install: `npx shadcn@latest add "https://ai-elements.solokit.run/r/<name>"`. The CLI reads `https://ai-elements.solokit.run/r/<name>.json` and writes the files into your project.
- Short names: add `"@solokit": "https://ai-elements.solokit.run/r/{name}.json"` under registries in components.json, then `npx shadcn@latest add @solokit/<name>`.
- MCP server: https://ai-elements.solokit.run/api/mcp (Streamable HTTP). Search items and read their source from Claude Code, Cursor, VS Code or Codex. No access key.
- Plain index: https://ai-elements.solokit.run/llms.txt
- Docs: https://ai-elements.solokit.run/en/docs

## Agent

- [Agent Plan](https://ai-elements.solokit.run/r/agent-plan.json): Reorder and retry the steps of one agent run. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/agent-plan"`.
- [Approval](https://ai-elements.solokit.run/r/approval.json): Ask before an agent sends, refunds, or otherwise leaves the product. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/approval"`.
- [Agent Trace](https://ai-elements.solokit.run/r/agent-trace.json): Model calls, tools, and time spent across a single agent run. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/agent-trace"`.
- [Agent Inbox](https://ai-elements.solokit.run/r/agent-inbox.json): Background agent tasks with approve, reject, retry, and open. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/agent-inbox"`.
- [Agent Steering](https://ai-elements.solokit.run/r/agent-steering.json): Queue a note for the next unfinished step of a run. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/agent-steering"`.
- [Agent Tree](https://ai-elements.solokit.run/r/agent-tree.json): Orchestrator and the tools or sub-agents it started, with status and time. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/agent-tree"`.
- [Agent Memory](https://ai-elements.solokit.run/r/agent-memory.json): Facts one run is using, with a way to forget one. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/agent-memory"`.
- [Agent Ledger](https://ai-elements.solokit.run/r/agent-ledger.json): Proposed edits for one run, with apply and revert. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/agent-ledger"`.
- [Agent Autonomy](https://ai-elements.solokit.run/r/agent-autonomy.json): Choose whether a run asks, waits on the send, or finishes alone. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/agent-autonomy"`.

## Chat

- [Conversation](https://ai-elements.solokit.run/r/conversation.json): Chat container with auto-scroll, user/assistant messages, and scroll-to-bottom button. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/conversation"`.
- [Message](https://ai-elements.solokit.run/r/message.json): Message bubbles with user/assistant roles, content, actions, and avatar support. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/message"`.
- [Reasoning](https://ai-elements.solokit.run/r/reasoning.json): Collapsible thinking/reasoning blocks with streaming support for AI model transparency. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/reasoning"`.
- [Data Card](https://ai-elements.solokit.run/r/data-card.json): Collapsible data display cards with 11 semantic variants for different content types. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/data-card"`.
- [Tool Invocation](https://ai-elements.solokit.run/r/tool-invocation.json): Timeline-based tool execution display with input/output panels and status indicators. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/tool-invocation"`.
- [Sources & Citations](https://ai-elements.solokit.run/r/sources.json): Collapsible source citations, inline citation badges, and source reference components. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/sources"`.
- [Suggestions](https://ai-elements.solokit.run/r/suggestions.json): Interactive suggestion cards and quick suggestion grids for AI follow-up prompts. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/suggestions"`.
- [Code Block](https://ai-elements.solokit.run/r/chatbot-code-block.json): Syntax-highlighted code display with line numbers, copy, download, and inline code. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/chatbot-code-block"`.
- [Web Preview](https://ai-elements.solokit.run/r/web-preview.json): Rich link preview cards with OG image support in standard, compact, and grid layouts. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/web-preview"`.
- [Loader](https://ai-elements.solokit.run/r/loader.json): Loading indicators, skeletons, and streaming cursor for AI responses. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/loader"`.
- [Shimmer](https://ai-elements.solokit.run/r/shimmer.json): Shimmer loading effect with framer-motion animation. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/shimmer"`.
- [Typewriter](https://ai-elements.solokit.run/r/typewriter.json): Typewriter text animation effect for streaming AI responses. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/typewriter"`.
- [Actions](https://ai-elements.solokit.run/r/actions.json): Message action bar with copy, regenerate, like/dislike, share, stop, and reload buttons. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/actions"`.
- [Inline Citation](https://ai-elements.solokit.run/r/inline-citation.json): Inline citation badges with tooltip previews and source linking. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/inline-citation"`.

## Dashboard

- [Metric Card](https://ai-elements.solokit.run/r/metric-card.json): KPI metric card with value, trend indicator, percentage change, and icon slot. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/metric-card"`.
- [Stats Badge](https://ai-elements.solokit.run/r/stats-badge.json): Inline statistics badge with up/down/neutral trend variants and colored dot indicator. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/stats-badge"`.
- [Status Indicator](https://ai-elements.solokit.run/r/status-indicator.json): Service status indicator with online/offline/degraded/maintenance variants and pulse animation. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/status-indicator"`.
- [User Avatar](https://ai-elements.solokit.run/r/user-avatar.json): User avatar with image, initials, and icon fallbacks, plus online/away/busy status badge. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/user-avatar"`.
- [Avatar Group](https://ai-elements.solokit.run/r/avatar-group.json): Stacked avatar group with max display count, overflow badge, and tooltip on hover. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/avatar-group"`.
- [Activity Feed](https://ai-elements.solokit.run/r/activity-feed.json): Timeline activity feed with avatar/icon/dot prefix types and semantic status colors. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/activity-feed"`.
- [Mini Chart](https://ai-elements.solokit.run/r/mini-chart.json): Pure SVG sparkline chart (line/bar/area) for displaying trends without external dependencies. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/mini-chart"`.
- [Progress Ring](https://ai-elements.solokit.run/r/progress-ring.json): Animated SVG circular progress ring with customizable size, color, and label. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/progress-ring"`.
- [Data Table](https://ai-elements.solokit.run/r/data-table.json): Sortable data table with striped rows, loading skeletons, pagination support, and empty states. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/data-table"`.
- [Filter Bar](https://ai-elements.solokit.run/r/filter-bar.json): Flexible filter control bar with search input, dropdown filters, and clear all action. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/filter-bar"`.
- [Dashboard Layout](https://ai-elements.solokit.run/r/dashboard-layout.json): Complete dashboard shell with collapsible sidebar, top header, responsive mobile drawer, and navigation slots. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/dashboard-layout"`.
- [Stats Grid](https://ai-elements.solokit.run/r/stats-grid.json): Responsive 2/3/4 column grid of MetricCards for dashboard overview panels. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/stats-grid"`.

## Marketing

- [Feature Card](https://ai-elements.solokit.run/r/feature-card.json): Feature highlight card with icon, title, description, and simple/bordered/gradient variants. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/feature-card"`.
- [Testimonial Card](https://ai-elements.solokit.run/r/testimonial-card.json): User testimonial card with quote, author, role, company, rating stars, and featured variant. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/testimonial-card"`.
- [Pricing Card](https://ai-elements.solokit.run/r/pricing-card.json): Pricing plan card with feature list, CTA button, and recommended highlight variant. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/pricing-card"`.
- [Announcement Bar](https://ai-elements.solokit.run/r/announcement-bar.json): Dismissible page-top announcement bar with icon, message, link, and color variants. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/announcement-bar"`.
- [Newsletter Form](https://ai-elements.solokit.run/r/newsletter-form.json): Email newsletter subscription form with horizontal/vertical layout and success/error states. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/newsletter-form"`.
- [Social Proof](https://ai-elements.solokit.run/r/social-proof.json): Social proof widget with stacked user avatars, member count, and star rating display. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/social-proof"`.
- [Breadcrumb Nav](https://ai-elements.solokit.run/r/breadcrumb-nav.json): Responsive breadcrumb navigation with custom separator, max items, and home icon support. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/breadcrumb-nav"`.
- [Hero Section](https://ai-elements.solokit.run/r/hero-section.json): Landing page hero with title, subtitle, description, CTA buttons, media slot, and background decorators. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/hero-section"`.
- [Feature Grid](https://ai-elements.solokit.run/r/feature-grid.json): Responsive 3-column feature grid with headline, description, and FeatureCard components. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/feature-grid"`.
- [Pricing Section](https://ai-elements.solokit.run/r/pricing-section.json): Full pricing section with monthly/yearly toggle, discount badge, and multiple plan cards. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/pricing-section"`.
- [Testimonial Grid](https://ai-elements.solokit.run/r/testimonial-grid.json): Testimonial section with masonry or uniform grid layout and headline area. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/testimonial-grid"`.
- [FAQ Accordion](https://ai-elements.solokit.run/r/faq-accordion.json): FAQ section with searchable accordion, category tabs, and smooth expand/collapse animation. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/faq-accordion"`.
- [CTA Banner](https://ai-elements.solokit.run/r/cta-banner.json): Call-to-action banner with fullwidth/card layouts, gradient/solid/subtle backgrounds, and primary/secondary buttons. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/cta-banner"`.
- [Logo Banner](https://ai-elements.solokit.run/r/logo-banner.json): Partner/client logo showcase with static grid or infinite marquee scrolling animation. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/logo-banner"`.
- [Step Process](https://ai-elements.solokit.run/r/step-process.json): Step-by-step process visualization in horizontal or vertical orientation with connector lines. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/step-process"`.
- [Comparison Table](https://ai-elements.solokit.run/r/comparison-table.json): Feature comparison table with plan columns, check/cross/text cells, and recommended column highlight. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/comparison-table"`.

## Docs

- [Docs Base Types](https://ai-elements.solokit.run/r/docs-base.json): Shared types and constants for documentation components. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/docs-base"`.
- [Doc Sidebar Navigation](https://ai-elements.solokit.run/r/doc-sidebar-navigation.json): Collapsible tree navigation supporting nested documents with active state tracking. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/doc-sidebar-navigation"`.
- [Doc Search](https://ai-elements.solokit.run/r/doc-search.json): Command palette search (⌘K) with fuzzy matching across all documentation pages. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/doc-search"`.
- [Doc Breadcrumb](https://ai-elements.solokit.run/r/doc-breadcrumb.json): Path-based breadcrumb navigation with customizable segment names. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/doc-breadcrumb"`.
- [Doc Table of Contents](https://ai-elements.solokit.run/r/doc-table-of-contents.json): Auto-generated TOC from markdown headings with scroll spy and smooth scrolling. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/doc-table-of-contents"`.
- [Doc Reading Progress](https://ai-elements.solokit.run/r/doc-reading-progress.json): Animated progress bar fixed at the top showing scroll position. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/doc-reading-progress"`.
- [Doc Code Highlight](https://ai-elements.solokit.run/r/doc-code-highlight.json): Prism.js syntax highlighting wrapper for code blocks. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/doc-code-highlight"`.
- [Doc Content](https://ai-elements.solokit.run/r/doc-content.json): Content wrapper with styled header, title gradient, description, and prose styling. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/doc-content"`.
- [Doc Navigation](https://ai-elements.solokit.run/r/doc-navigation.json): Previous/Next navigation between documentation pages. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/doc-navigation"`.
- [Doc MDX Cards](https://ai-elements.solokit.run/r/doc-cards.json): Card and CardGrid components for navigation links within MDX documentation. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/doc-cards"`.
- [Doc Layout](https://ai-elements.solokit.run/r/doc-layout.json): Full documentation page layout with sidebar, search, reading progress, and responsive mobile support. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/doc-layout"`.
- [Doc Hooks](https://ai-elements.solokit.run/r/doc-hooks.json): useDocsStructure and useTOC hooks for documentation pages. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/doc-hooks"`.

## Forms

- [Form Field](https://ai-elements.solokit.run/r/form-field.json): Form field wrapper with label, required indicator, helper text, and error message display. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/form-field"`.
- [Tag Input](https://ai-elements.solokit.run/r/tag-input.json): Tag/chip input with Enter/comma creation, click-to-remove, color variants, and max count. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/tag-input"`.
- [Rating Input](https://ai-elements.solokit.run/r/rating-input.json): Interactive star/heart/thumb rating input with half-star support and hover preview. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/rating-input"`.
- [File Upload](https://ai-elements.solokit.run/r/file-upload.json): Drag-and-drop file upload zone with image previews, size validation, and upload progress. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/file-upload"`.
- [OTP Input](https://ai-elements.solokit.run/r/otp-input.json): One-time password input with auto-focus navigation, paste support, and shake error animation. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/otp-input"`.
- [Search Input](https://ai-elements.solokit.run/r/search-input.json): Enhanced search input with clear button, loading state, keyboard shortcut hint, and custom slots. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/search-input"`.
- [Slider Input](https://ai-elements.solokit.run/r/slider-input.json): Range slider with single or dual-thumb mode, value display, and custom format function. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/slider-input"`.
- [Color Picker](https://ai-elements.solokit.run/r/color-picker.json): Color picker with preset swatches, hex input, and native color picker fallback in a popover. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/color-picker"`.
- [Date Picker](https://ai-elements.solokit.run/r/date-picker.json): Calendar date picker with month navigation, disabled dates, today shortcut, and clear action. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/date-picker"`.
- [Toggle Group](https://ai-elements.solokit.run/r/toggle-group.json): Single or multi-select toggle group with icon+text, icon-only, and text-only display modes. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/toggle-group"`.
- [Multi Select](https://ai-elements.solokit.run/r/multi-select.json): Multi-select dropdown with search filter, tag display, select-all, and max selection limit. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/multi-select"`.
- [Login Form](https://ai-elements.solokit.run/r/login-form.json): Complete login form block with email/password fields, remember me, forgot password, and social auth divider. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/login-form"`.

## Motion

- [Fade In](https://ai-elements.solokit.run/r/fade-in.json): Animate elements into view with configurable fade and directional slide. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/fade-in"`.
- [Slide In](https://ai-elements.solokit.run/r/slide-in.json): Spring-physics slide-in animation from any direction on viewport entry. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/slide-in"`.
- [Scale In](https://ai-elements.solokit.run/r/scale-in.json): Scale and fade elements in from a smaller size on viewport entry. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/scale-in"`.
- [Stagger List](https://ai-elements.solokit.run/r/stagger-list.json): Animate a list of children with staggered entrance delay. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/stagger-list"`.
- [Count Up](https://ai-elements.solokit.run/r/count-up.json): Animated number counter that counts from a start value to target on viewport entry. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/count-up"`.
- [Text Reveal](https://ai-elements.solokit.run/r/text-reveal.json): Animate text word-by-word or character-by-character with blur and slide effect. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/text-reveal"`.
- [Flip Card](https://ai-elements.solokit.run/r/flip-card.json): 3D flip card with front/back faces, supports hover or click trigger. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/flip-card"`.
- [Magnetic Button](https://ai-elements.solokit.run/r/magnetic-button.json): Button that magnetically follows cursor with spring physics. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/magnetic-button"`.
- [Ripple Button](https://ai-elements.solokit.run/r/ripple-button.json): Button with material-style ripple effect on click. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/ripple-button"`.
- [Confetti Button](https://ai-elements.solokit.run/r/confetti-button.json): Button that bursts colourful confetti particles on click. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/confetti-button"`.
- [Marquee](https://ai-elements.solokit.run/r/marquee.json): Infinite horizontal scroll marquee with pause-on-hover support. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/marquee"`.
- [Orbit](https://ai-elements.solokit.run/r/orbit.json): Items orbiting around a center element with configurable speed and radius. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/orbit"`.
- [Spotlight Card](https://ai-elements.solokit.run/r/spotlight-card.json): Card with dynamic spotlight/glow effect that follows the cursor. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/spotlight-card"`.
- [Particle Burst](https://ai-elements.solokit.run/r/particle-burst.json): Colourful particle explosion on hover, click, or mount. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/particle-burst"`.
- [Floating Badge](https://ai-elements.solokit.run/r/floating-badge.json): Animated badge that floats over a child element with spring entrance/exit. Install with `npx shadcn@latest add "https://ai-elements.solokit.run/r/floating-badge"`.