@ai/elements
⚡ AI-powered Svelte components built on shadcn-svelte. Requires shadcn-svelte installation. Add beautiful conversational AI interfaces to your SvelteKit apps.
jsrepo init @ai/elements
Svelte AI Elements
Pre-built, customizable Svelte AI components for AI-native applications
Overview
Svelte AI Elements is a custom registy built on top of shadcn-svelte to help you build AI-native applications faster. It provides a set of customizable, high-quality components build for AI applications like prompt input, messages, conversation, response and more.
Key Features
- Beautiful Design: Built on top of shadcn-svelte with modern, accessible UI components
- Highly Customizable: Easily modify components to match your brand and requirements
- Responsive: Works seamlessly across desktop and mobile devices
- Accessible: Built with accessibility best practices in mind
- TypeScript Ready: Full TypeScript support with comprehensive type definitions
Installation
We have created a custom registry for easy installation of components using the shadcn-svelte CLI.
# Demo Command to install a component
bun x shadcn-svelte@latest add https://ai-elements.vercel.app/r/[COMPONENT].jsonLicense
This project is licensed under the MIT License - see the LICENSE file for details.
References and Inspirations
This project draws inspiration from several excellent projects in the web development and AI space:
- shadcn-svelte-extras - Additional components and utilities for shadcn-svelte
- Prompt Kit - Beautiful UI components for AI applications
- AI Elements - AI Elements by Vercel for building AI-powered applications
Acknowledgments
- Built with Svelte 5 and SvelteKit
- UI components based on shadcn-svelte
- Styling with TailwindCSS
- AI integration powered by Vercel AI SDK
Made with ❤️ by Sikandar Bhide (Bhide Svelte)
- is-mobile.svelte.ts
- use-clipboard.svelte.ts
- use-toc.svelte.ts
- utils.ts
- clsx@^2.1.1
- tailwind-merge@^3.3.1
- Action.svelte
- Actions.svelte
- index.ts
- utils/utils
- ui/button
- ui/tooltip
- Artifact.svelte
- ArtifactAction.svelte
- ArtifactActions.svelte
- ArtifactClose.svelte
- ArtifactContent.svelte
- ArtifactDescription.svelte
- ArtifactHeader.svelte
- ArtifactTitle.svelte
- index.ts
- @lucide/svelte@^0.544.0
- utils/utils
- ui/button
- ui/tooltip
- branch-context.ts
- Branch.svelte
- BranchMessages.svelte
- BranchNext.svelte
- BranchPage.svelte
- BranchPrevious.svelte
- BranchSelector.svelte
- index.ts
- utils/utils
- ui/button
- chain-of-thought-context.svelte.ts
- ChainOfThought.svelte
- ChainOfThoughtContent.svelte
- ChainOfThoughtHeader.svelte
- ChainOfThoughtImage.svelte
- ChainOfThoughtSearchResult.svelte
- ChainOfThoughtSearchResults.svelte
- ChainOfThoughtStep.svelte
- index.ts
- README.md
- @lucide/svelte@^0.544.0
- utils/utils
- ui/collapsible
- ui/badge
- Code.svelte
- code.svelte.ts
- CodeCopyButton.svelte
- CodeOverflow.svelte
- index.ts
- shiki.ts
- types.ts
- svelte-toolbelt@^0.10.5
- runed@^0.31.1
- isomorphic-dompurify@^2.28.0
- shiki@^3.13.0
- @shikijs/langs@^3.13.0
- @shikijs/themes@^3.13.0
- tailwind-variants@^1.0.0
- bits-ui@^2.11.4
- utils/utils
- ai-elements/copy-button
- ui/button
- context-context.svelte.ts
- Context.svelte
- ContextCacheUsage.svelte
- ContextContent.svelte
- ContextContentBody.svelte
- ContextContentFooter.svelte
- ContextContentHeader.svelte
- ContextIcon.svelte
- ContextInputUsage.svelte
- ContextOutputUsage.svelte
- ContextReasoningUsage.svelte
- ContextTrigger.svelte
- index.ts
- TokensWithCost.svelte
- ui/hover-card
- utils/utils
- ui/progress
- ui/button
- Conversation.svelte
- ConversationContent.svelte
- ConversationEmptyState.svelte
- ConversationScrollButton.svelte
- index.ts
- stick-to-bottom-context.svelte.ts
- runed@^0.31.1
- @lucide/svelte@^0.544.0
- utils/utils
- ui/button
- CopyButton.svelte
- index.ts
- types.ts
- @lucide/svelte@^0.544.0
- bits-ui@^2.11.4
- ui/button
- hooks/use-clipboard.svelte
- utils/utils
- Image.svelte
- index.ts
- types.ts
- utils/utils
- carousel-context.svelte.ts
- index.ts
- InlineCitation.svelte
- InlineCitationCard.svelte
- InlineCitationCardBody.svelte
- InlineCitationCardTrigger.svelte
- InlineCitationCarousel.svelte
- InlineCitationCarouselContent.svelte
- InlineCitationCarouselHeader.svelte
- InlineCitationCarouselIndex.svelte
- InlineCitationCarouselItem.svelte
- InlineCitationCarouselNext.svelte
- InlineCitationCarouselPrev.svelte
- InlineCitationQuote.svelte
- InlineCitationSource.svelte
- InlineCitationText.svelte
- @lucide/svelte@^0.544.0
- utils/utils
- ui/hover-card
- ui/badge
- ui/carousel
- index.ts
- Loader.svelte
- LoaderIcon.svelte
- index.ts
- Message.svelte
- MessageAvatar.svelte
- MessageContent.svelte
- ai@^5.0.55
- tailwind-variants@^1.0.0
- utils/utils
- ui/avatar
- ChatGPTIcon.svelte
- ClaudeIcon.svelte
- GitHubIcon.svelte
- index.ts
- open-in-context.svelte.ts
- OpenIn.svelte
- OpenInChatGPT.svelte
- OpenInClaude.svelte
- OpenInContent.svelte
- OpenInItem.svelte
- OpenInLabel.svelte
- OpenInScira.svelte
- OpenInSeparator.svelte
- OpenInT3.svelte
- OpenInTrigger.svelte
- OpenInV0.svelte
- SciraIcon.svelte
- V0Icon.svelte
- runed@^0.31.1
- @lucide/svelte@^0.544.0
- ui/dropdown-menu
- utils/utils
- ui/button
- attachments-context.svelte.ts
- GlobeIcon.svelte
- ImageIcon.svelte
- index.ts
- Loader2Icon.svelte
- MicIcon.svelte
- PaperclipIcon.svelte
- PlusIcon.svelte
- PromptInput.svelte
- PromptInputActionAddAttachments.svelte
- PromptInputActionMenu.svelte
- PromptInputActionMenuContent.svelte
- PromptInputActionMenuItem.svelte
- PromptInputActionMenuTrigger.svelte
- PromptInputAttachment.svelte
- PromptInputAttachments.svelte
- PromptInputBody.svelte
- PromptInputButton.svelte
- PromptInputModelSelect.svelte
- PromptInputModelSelectContent.svelte
- PromptInputModelSelectItem.svelte
- PromptInputModelSelectTrigger.svelte
- PromptInputModelSelectValue.svelte
- PromptInputProvider.svelte
- PromptInputSubmit.svelte
- PromptInputTextarea.svelte
- PromptInputToolbar.svelte
- PromptInputTools.svelte
- SendIcon.svelte
- SquareIcon.svelte
- XIcon.svelte
- runed@^0.31.1
- utils/utils
- ui/dropdown-menu
- ui/button
- ui/tooltip
- ui/select
- ui/textarea
- BrainIcon.svelte
- ChevronDownIcon.svelte
- index.ts
- reasoning-context.svelte.ts
- Reasoning.svelte
- ReasoningContent.svelte
- ReasoningTrigger.svelte
- Response.svelte
- runed@^0.31.1
- @lucide/svelte@^0.544.0
- utils/utils
- ui/collapsible
- index.ts
- Response.svelte
- svelte-streamdown@^2.3.0
- mode-watcher@^1.1.0
- utils/utils
- BookIcon.svelte
- ChevronDownIcon.svelte
- index.ts
- Source.svelte
- Sources.svelte
- SourcesContent.svelte
- SourcesTrigger.svelte
- utils/utils
- ui/collapsible
- index.ts
- Suggestion.svelte
- Suggestions.svelte
- ui/button
- utils/utils
- ui/scroll-area
- index.ts
- SvelteIcon.svelte
- Task.svelte
- TaskContent.svelte
- TaskItem.svelte
- TaskItemFile.svelte
- TaskTrigger.svelte
- bits-ui@^2.11.4
- @lucide/svelte@^0.544.0
- ui/collapsible
- utils/utils
- index.ts
- tool-context.svelte.ts
- Tool.svelte
- ToolContent.svelte
- ToolHeader.svelte
- ToolInput.svelte
- ToolOutput.svelte
- runed@^0.31.1
- @lucide/svelte@^0.544.0
- ui/collapsible
- utils/utils
- ui/badge
- ai-elements/code
- index.ts
- web-preview-context.svelte.ts
- WebPreview.svelte
- WebPreviewBody.svelte
- WebPreviewConsole.svelte
- WebPreviewNavigation.svelte
- WebPreviewNavigationButton.svelte
- WebPreviewUrl.svelte
- @lucide/svelte@^0.544.0
- utils/utils
- ui/button
- ui/collapsible
- ui/tooltip
- canvas/Canvas.svelte
- connection/Connection.svelte
- controls/Controls.svelte
- edge/Animated.svelte
- edge/index.ts
- edge/Temporary.svelte
- node/index.ts
- node/node-action.svelte
- node/node-content.svelte
- node/node-description.svelte
- node/node-footer.svelte
- node/node-header.svelte
- node/node-title.svelte
- node/node.svelte
- panel/index.ts
- panel/panel.svelte
- toolbar/index.ts
- toolbar/toolbar.svelte
- @xyflow/svelte@^1.3.1
- mode-watcher@^1.1.0
- utils/utils
- ui/card
- avatar-fallback.svelte
- avatar-image.svelte
- avatar.svelte
- index.ts
- bits-ui@^2.11.4
- utils/utils
- badge.svelte
- index.ts
- utils/utils
- breadcrumb-ellipsis.svelte
- breadcrumb-item.svelte
- breadcrumb-link.svelte
- breadcrumb-list.svelte
- breadcrumb-page.svelte
- breadcrumb-separator.svelte
- breadcrumb.svelte
- index.ts
- @lucide/svelte@^0.544.0
- utils/utils
- button.svelte
- index.ts
- bits-ui@^2.11.4
- tailwind-variants@^1.0.0
- utils/utils
- card-action.svelte
- card-content.svelte
- card-description.svelte
- card-footer.svelte
- card-header.svelte
- card-title.svelte
- card.svelte
- index.ts
- utils/utils
- carousel-content.svelte
- carousel-item.svelte
- carousel-next.svelte
- carousel-previous.svelte
- carousel.svelte
- context.ts
- index.ts
- embla-carousel-svelte@^8.6.0
- @lucide/svelte@^0.544.0
- bits-ui@^2.11.4
- utils/utils
- ui/button
- collapsible-content.svelte
- collapsible-trigger.svelte
- collapsible.svelte
- index.ts
- bits-ui@^2.11.4
- command-dialog.svelte
- command-empty.svelte
- command-group.svelte
- command-input.svelte
- command-item.svelte
- command-link-item.svelte
- command-list.svelte
- command-separator.svelte
- command-shortcut.svelte
- command.svelte
- index.ts
- bits-ui@^2.11.4
- @lucide/svelte@^0.544.0
- ui/dialog
- utils/utils
- dialog-close.svelte
- dialog-content.svelte
- dialog-description.svelte
- dialog-footer.svelte
- dialog-header.svelte
- dialog-overlay.svelte
- dialog-title.svelte
- dialog-trigger.svelte
- index.ts
- bits-ui@^2.11.4
- @lucide/svelte@^0.544.0
- utils/utils
- dropdown-menu-checkbox-item.svelte
- dropdown-menu-content.svelte
- dropdown-menu-group-heading.svelte
- dropdown-menu-group.svelte
- dropdown-menu-item.svelte
- dropdown-menu-label.svelte
- dropdown-menu-radio-group.svelte
- dropdown-menu-radio-item.svelte
- dropdown-menu-separator.svelte
- dropdown-menu-shortcut.svelte
- dropdown-menu-sub-content.svelte
- dropdown-menu-sub-trigger.svelte
- dropdown-menu-trigger.svelte
- index.ts
- bits-ui@^2.11.4
- @lucide/svelte@^0.544.0
- utils/utils
- hover-card-content.svelte
- hover-card-trigger.svelte
- index.ts
- bits-ui@^2.11.4
- utils/utils
- index.ts
- input.svelte
- utils/utils
- index.ts
- light-switch.svelte
- types.ts
- mode-watcher@^1.1.0
- @lucide/svelte@^0.544.0
- ui/button
- index.ts
- navigation-menu-content.svelte
- navigation-menu-indicator.svelte
- navigation-menu-item.svelte
- navigation-menu-link.svelte
- navigation-menu-list.svelte
- navigation-menu-trigger.svelte
- navigation-menu-viewport.svelte
- navigation-menu.svelte
- bits-ui@^2.11.4
- @lucide/svelte@^0.544.0
- tailwind-variants@^1.0.0
- utils/utils
- index.ts
- popover-content.svelte
- popover-trigger.svelte
- bits-ui@^2.11.4
- utils/utils
- index.ts
- progress.svelte
- bits-ui@^2.11.4
- utils/utils
- index.ts
- scroll-area-scrollbar.svelte
- scroll-area.svelte
- bits-ui@^2.11.4
- utils/utils
- index.ts
- select-content.svelte
- select-group-heading.svelte
- select-group.svelte
- select-item.svelte
- select-label.svelte
- select-scroll-down-button.svelte
- select-scroll-up-button.svelte
- select-separator.svelte
- select-trigger.svelte
- bits-ui@^2.11.4
- @lucide/svelte@^0.544.0
- utils/utils
- ui/separator
- index.ts
- separator.svelte
- bits-ui@^2.11.4
- utils/utils
- index.ts
- sheet-close.svelte
- sheet-content.svelte
- sheet-description.svelte
- sheet-footer.svelte
- sheet-header.svelte
- sheet-overlay.svelte
- sheet-title.svelte
- sheet-trigger.svelte
- bits-ui@^2.11.4
- @lucide/svelte@^0.544.0
- tailwind-variants@^1.0.0
- utils/utils
- constants.ts
- context.svelte.ts
- index.ts
- sidebar-content.svelte
- sidebar-footer.svelte
- sidebar-group-action.svelte
- sidebar-group-content.svelte
- sidebar-group-label.svelte
- sidebar-group.svelte
- sidebar-header.svelte
- sidebar-input.svelte
- sidebar-inset.svelte
- sidebar-menu-action.svelte
- sidebar-menu-badge.svelte
- sidebar-menu-button.svelte
- sidebar-menu-item.svelte
- sidebar-menu-skeleton.svelte
- sidebar-menu-sub-button.svelte
- sidebar-menu-sub-item.svelte
- sidebar-menu-sub.svelte
- sidebar-menu.svelte
- sidebar-provider.svelte
- sidebar-rail.svelte
- sidebar-separator.svelte
- sidebar-trigger.svelte
- sidebar.svelte
- bits-ui@^2.11.4
- tailwind-variants@^1.0.0
- @lucide/svelte@^0.544.0
- hooks/is-mobile.svelte
- utils/utils
- ui/input
- ui/tooltip
- ui/skeleton
- ui/separator
- ui/button
- ui/sheet
- index.ts
- skeleton.svelte
- utils/utils
- index.ts
- tabs-content.svelte
- tabs-list.svelte
- tabs-trigger.svelte
- tabs.svelte
- bits-ui@^2.11.4
- utils/utils
- index.ts
- textarea.svelte
- utils/utils
- index.ts
- tooltip-content.svelte
- tooltip-trigger.svelte
- bits-ui@^2.11.4
- utils/utils
| Package | Version |
|---|---|
| clsx | ^2.1.1 |
| tailwind-merge | ^3.3.1 |
| @lucide/svelte | ^0.544.0 |
| svelte-toolbelt | ^0.10.5 |
| runed | ^0.31.1 |
| isomorphic-dompurify | ^2.28.0 |
| shiki | ^3.13.0 |
| @shikijs/langs | ^3.13.0 |
| @shikijs/themes | ^3.13.0 |
| tailwind-variants | ^1.0.0 |
| bits-ui | ^2.11.4 |
| ai | ^5.0.55 |
| svelte-streamdown | ^2.3.0 |
| mode-watcher | ^1.1.0 |
| @xyflow/svelte | ^1.3.1 |
| embla-carousel-svelte | ^8.6.0 |