Dev Design Library

AI Elements (Svelte) components

Svelte AI Elements is a unofficial port of Vercel AI Elements, built on top of shadcn-svelte.

Components
24
Framework
Svelte
Stack
Svelte, TypeScript, Tailwind
License
MIT
GitHub stars
318
Source
https://github.com/SikandarJODD/ai-elements
Website
https://svelte-ai-elements.vercel.app
Install
pnpm dlx shadcn-svelte@latest add https://svelte-ai-elements.vercel.app/r/{name}.json

All AI Elements (Svelte) components

  • Chain Of Thought: A collapsible component that visualizes AI reasoning steps with support for search results, images, and step-by-step progress indicators.
  • Checkpoint: A compact checkpoint component that pairs a separator with icon and trigger helpers for workflow checkpoints.
  • Code: A syntax-highlighted code block with overflow handling and a copy action.
  • Confirmation: A confirmation workflow component for tool approval states, request and response rendering, and action handling.
  • Context: A hover-card-based context window usage component with token, cost, and model usage breakdowns.
  • Conversation: A sticky-bottom conversation container with empty state and scroll-to-bottom controls for chat interfaces.
  • Copy Button: A clipboard-driven button with success and failure states.
  • Image: A data-URL image component with typed props for AI-generated image payloads.
  • Inline Citation: An inline citation system with hover cards and carousel views for source-backed AI content.
  • Loader: A lightweight animated loader with a separate icon component.
  • Message: A full chat message system with branching, attachments, actions, and markdown streaming responses.
  • Model Selector: A searchable model selector dialog built on command and dialog primitives.
  • Open In Chat: A provider menu for opening prompts in external chat and AI tools.
  • Plan: A plan card component with collapsible content and streaming-aware description shimmer.
  • Prompt Input: A composable prompt input surface with attachments, action menus, and provider-driven text handling.
  • Queue: A structured queue view with sections, items, attachments, and action controls.
  • Reasoning: A collapsible reasoning block that tracks streaming duration and renders a markdown response.
  • Response: A markdown response renderer for streamed AI content.
  • Shimmer: A text shimmer utility component with configurable spread and duration.
  • Sources: A collapsible sources list for rendering cited links and source groups.
  • Suggestion: A compact suggestion button set for displaying prompt ideas and quick actions.
  • Task: A collapsible task panel for tracking task state and nested task items.
  • Tool: A collapsible tool call block with parameter and result rendering.
  • Web Preview: A browser-style preview frame with navigation controls and a log console.

Browse by category