Dev Design LibrarySvelte AI Element Components
Dev Design Library indexes 25 Svelte ai element components from 3 open-source UI libraries, with the most coming from AI Elements (Svelte), sv-particles and Animations (Svelte). Each one links to its page with the source code, a live preview where available, the library license and the install command. Every library in this list targets Svelte.
Spell Fallback AvatarAnimations (Svelte) · Svelte
Chain Of ThoughtAI Elements (Svelte) · SvelteA collapsible component that visualizes AI reasoning steps with support for search results, images, and step-by-step…
Chat Input With Voice And Send Buttonsv-particles · Svelte
CheckpointAI Elements (Svelte) · SvelteA compact checkpoint component that pairs a separator with icon and trigger helpers for workflow checkpoints.
Message Composer With Attachmentssv-particles · Svelte
ConfirmationAI Elements (Svelte) · SvelteA confirmation workflow component for tool approval states, request and response rendering, and action handling.
Search Input With Loader And Voicesv-particles · Svelte
ContextAI Elements (Svelte) · SvelteA hover-card-based context window usage component with token, cost, and model usage breakdowns.
ConversationAI Elements (Svelte) · SvelteA sticky-bottom conversation container with empty state and scroll-to-bottom controls for chat interfaces.
ImageAI Elements (Svelte) · SvelteA data-URL image component with typed props for AI-generated image payloads.
Inline CitationAI Elements (Svelte) · SvelteAn inline citation system with hover cards and carousel views for source-backed AI content.
LoaderAI Elements (Svelte) · SvelteA lightweight animated loader with a separate icon component.
MessageAI Elements (Svelte) · SvelteA full chat message system with branching, attachments, actions, and markdown streaming responses.
Model SelectorAI Elements (Svelte) · SvelteA searchable model selector dialog built on command and dialog primitives.
PlanAI Elements (Svelte) · SvelteA plan card component with collapsible content and streaming-aware description shimmer.
Prompt InputAI Elements (Svelte) · SvelteA composable prompt input surface with attachments, action menus, and provider-driven text handling.
QueueAI Elements (Svelte) · SvelteA structured queue view with sections, items, attachments, and action controls.
ReasoningAI Elements (Svelte) · SvelteA collapsible reasoning block that tracks streaming duration and renders a markdown response.
ResponseAI Elements (Svelte) · SvelteA markdown response renderer for streamed AI content.
ShimmerAI Elements (Svelte) · SvelteA text shimmer utility component with configurable spread and duration.
SourcesAI Elements (Svelte) · SvelteA collapsible sources list for rendering cited links and source groups.
SuggestionAI Elements (Svelte) · SvelteA compact suggestion button set for displaying prompt ideas and quick actions.
TaskAI Elements (Svelte) · SvelteA collapsible task panel for tracking task state and nested task items.
ToolAI Elements (Svelte) · SvelteA collapsible tool call block with parameter and result rendering.
Web PreviewAI Elements (Svelte) · SvelteA browser-style preview frame with navigation controls and a log console.