@ieedan/shadcn-svelte-extras
Turn key shadcn-svelte components to help finish your app.
- chat/chat-bubble-avatar.svelte
- chat/chat-bubble-message.svelte
- chat/chat-bubble.svelte
- chat/chat-list.svelte
- chat/index.ts
- chat/loading-dots.svelte
- chat/types.ts
- bits-ui@^2.16.5
- @lucide/svelte@^1.7.0
- shadcn-svelte-avatar
- utils
- button
- use-auto-scroll
- code/code-copy-button.svelte
- code/code-overflow.svelte
- code/code.svelte
- code/code.svelte.ts
- code/index.ts
- code/shiki.ts
- code/types.ts
- svelte-toolbelt@^0.10.6
- runed@^0.37.1
- shiki@^4.0.2
- tailwind-variants@^3.2.2
- @shikijs/langs@^4.0.2
- @shikijs/themes@^4.0.2
- bits-ui@^2.16.5
- copy-button
- utils
- button
- confirm-delete-dialog/confirm-delete-dialog.svelte
- confirm-delete-dialog/index.ts
- shadcn-svelte-alert-dialog
- shadcn-svelte-input
- copy-button/copy-button.svelte
- copy-button/index.ts
- bits-ui@^2.16.5
- @lucide/svelte@^1.7.0
- shadcn-svelte-button
- button
- use-clipboard
- utils
- emoji-picker/emoji-picker-footer.svelte
- emoji-picker/emoji-picker-list.svelte
- emoji-picker/emoji-picker-search.svelte
- emoji-picker/emoji-picker-skin-tone-selector.svelte
- emoji-picker/emoji-picker-viewport.svelte
- emoji-picker/emoji-picker.svelte
- emoji-picker/emoji-picker.svelte.ts
- emoji-picker/index.ts
- emoji-picker/types.ts
- bits-ui@^2.16.5
- @emoji-mart/data@^1.2.1
- @lucide/svelte@^1.7.0
- svelte-toolbelt@^0.10.6
- runed@^0.37.1
- utils
- shadcn-svelte-command
- casing
- button
- use-frecency
- field-set/field-set-content.svelte
- field-set/field-set-footer.svelte
- field-set/field-set-title.svelte
- field-set/field-set.svelte
- field-set/index.ts
- field-set/types.ts
- tailwind-variants@^3.2.2
- bits-ui@^2.16.5
- utils
- file-drop-zone/file-drop-zone-textarea.svelte
- file-drop-zone/file-drop-zone-trigger.svelte
- file-drop-zone/file-drop-zone.svelte
- file-drop-zone/file-drop-zone.svelte.ts
- file-drop-zone/index.ts
- file-drop-zone/types.ts
- svelte-toolbelt@^0.10.6
- bits-ui@^2.16.5
- @lucide/svelte@^1.7.0
- runed@^0.37.1
- utils
- github-button/github-button.svelte
- github-button/index.ts
- button
- utils
- image-cropper/image-cropper-cancel.svelte
- image-cropper/image-cropper-controls.svelte
- image-cropper/image-cropper-crop.svelte
- image-cropper/image-cropper-cropper.svelte
- image-cropper/image-cropper-dialog.svelte
- image-cropper/image-cropper-preview.svelte
- image-cropper/image-cropper-upload-trigger.svelte
- image-cropper/image-cropper.svelte
- image-cropper/image-cropper.svelte.ts
- image-cropper/index.ts
- image-cropper/types.ts
- image-cropper/utils.ts
- @lucide/svelte@^1.7.0
- svelte-easy-crop@^5.0.1
- svelte-toolbelt@^0.10.6
- bits-ui@^2.16.5
- runed@^0.37.1
- button
- utils
- shadcn-svelte-dialog
- shadcn-svelte-avatar
- ipv4address-input/index.ts
- ipv4address-input/ipv4address-input-input.svelte
- ipv4address-input/ipv4address-input.svelte
- ipv4address-input/types.ts
- is-number
- utils
- ipv4-address
- language-switcher/index.ts
- language-switcher/language-switcher.svelte
- @lucide/svelte@^1.7.0
- shadcn-svelte-dropdown-menu
- shadcn-svelte-button
- utils
- light-switch/index.ts
- light-switch/light-switch.svelte
- @lucide/svelte@^1.7.0
- mode-watcher@^1.1.0
- button
- link/index.ts
- link/link.svelte
- utils
- meter/index.ts
- meter/meter.svelte
- bits-ui@^2.16.5
- utils
- modal/index.ts
- modal/modal-content.svelte
- modal/modal-description.svelte
- modal/modal-footer.svelte
- modal/modal-header.svelte
- modal/modal-nested-root.svelte
- modal/modal-title.svelte
- modal/modal-trigger.svelte
- modal/modal.svelte
- modal/modal.svelte.ts
- bits-ui@^2.16.5
- runed@^0.37.1
- shadcn-svelte-dialog
- shadcn-svelte-drawer
- nlp-date-input/index.ts
- nlp-date-input/nlp-date-input.svelte
- yeezy-dates@^1.1.0
- shadcn-svelte-command
- number-field/index.ts
- number-field/number-field-decrement.svelte
- number-field/number-field-group.svelte
- number-field/number-field-increment.svelte
- number-field/number-field-input.svelte
- number-field/number-field.svelte
- number-field/number-field.svelte.ts
- number-field/types.ts
- @lucide/svelte@^1.7.0
- svelte-toolbelt@^0.10.6
- runed@^0.37.1
- button
- utils
- use-ramp
- password/index.ts
- password/password-copy.svelte
- password/password-input.svelte
- password/password-strength.svelte
- password/password-toggle-visibility.svelte
- password/password.svelte
- password/password.svelte.ts
- password/types.ts
- svelte-toolbelt@^0.10.6
- tailwind-variants@^3.2.2
- bits-ui@^2.16.5
- @lucide/svelte@^1.7.0
- runed@^0.37.1
- @zxcvbn-ts/core@^3.0.4
- @zxcvbn-ts/language-common@^3.0.4
- @zxcvbn-ts/language-en@^3.0.2
- copy-button
- utils
- shadcn-svelte-input
- shadcn-svelte-toggle
- phone-input/country-selector.svelte
- phone-input/flag.svelte
- phone-input/flags.ts
- phone-input/index.ts
- phone-input/phone-input.svelte
- phone-input/types.ts
- @lucide/svelte@^1.7.0
- svelte-tel-input@^4.0.2
- country-flag-icons@^1.6.15
- shadcn-svelte-popover
- button
- shadcn-svelte-command
- shadcn-svelte-scroll-area
- utils
- pm-command/index.ts
- pm-command/pm-command.svelte
- tailwind-variants@^3.2.2
- package-manager-detector@^1.6.0
- @lucide/svelte@^1.7.0
- utils
- copy-button
- shadcn-svelte-tooltip
- shadcn-svelte-tabs
- rename/index.ts
- rename/rename-cancel.svelte
- rename/rename-edit.svelte
- rename/rename-provider.svelte
- rename/rename-save.svelte
- rename/rename.svelte
- rename/rename.svelte.ts
- rename/types.ts
- svelte-toolbelt@^0.10.6
- runed@^0.37.1
- button
- utils
- snippet/index.ts
- snippet/snippet.svelte
- tailwind-variants@^3.2.2
- utils
- copy-button
- use-clipboard
- stepper/index.ts
- stepper/stepper-description.svelte
- stepper/stepper-indicator.svelte
- stepper/stepper-item.svelte
- stepper/stepper-nav.svelte
- stepper/stepper-next.svelte
- stepper/stepper-previous.svelte
- stepper/stepper-separator.svelte
- stepper/stepper-title.svelte
- stepper/stepper-trigger.svelte
- stepper/stepper.svelte
- stepper/stepper.svelte.ts
- stepper/types.ts
- svelte-toolbelt@^0.10.6
- runed@^0.37.1
- utils
- shadcn-svelte-button
- split-button/index.ts
- split-button/split-button-action.svelte
- split-button/split-button-content.svelte
- split-button/split-button-select-action.svelte
- split-button/split-button-select-trigger.svelte
- split-button/split-button-select.svelte
- split-button/split-button.svelte
- split-button/split-button.svelte.ts
- bits-ui@^2.16.5
- svelte-toolbelt@^0.10.6
- @lucide/svelte@^1.7.0
- runed@^0.37.1
- shadcn-svelte-select
- button
- utils
- shadcn-svelte-button
- shadcn-svelte-button-group
- star-rating/index.ts
- star-rating/star-rating-star.svelte
- star-rating/star-rating.svelte
- star-rating/types.ts
- @lucide/svelte@^1.7.0
- bits-ui@^2.16.5
- utils
- tags-input/index.ts
- tags-input/tags-input-suggestion.svelte
- tags-input/tags-input-tag.svelte
- tags-input/tags-input.svelte
- tags-input/types.ts
- @lucide/svelte@^1.7.0
- utils
- terminal/index.ts
- terminal/terminal-animated-span.svelte
- terminal/terminal-loading.svelte
- terminal/terminal-loop.svelte
- terminal/terminal-typing-animation.svelte
- terminal/terminal.svelte
- terminal/terminal.svelte.ts
- terminal/types.ts
- svelte-toolbelt@^0.10.6
- runed@^0.37.1
- bits-ui@^2.16.5
- utils
- typewriter
- window
- theme-selector/index.ts
- theme-selector/theme-selector.svelte
- @lucide/svelte@^1.7.0
- mode-watcher@^1.1.0
- button
- shadcn-svelte-dropdown-menu
- shadcn-svelte-button
- toc/index.ts
- toc/toc.svelte
- use-toc
- utils
- tree-view/index.ts
- tree-view/tree-view-file.svelte
- tree-view/tree-view-folder.svelte
- tree-view/tree-view.svelte
- tree-view/types.ts
- @lucide/svelte@^1.7.0
- bits-ui@^2.16.5
- utils
- shadcn-svelte-collapsible
- underline-tabs/index.ts
- underline-tabs/underline-tabs-content.svelte
- underline-tabs/underline-tabs-list.svelte
- underline-tabs/underline-tabs-trigger.svelte
- underline-tabs/underline-tabs.svelte
- underline-tabs/underline-tabs.svelte.ts
- bits-ui@^2.16.5
- svelte-toolbelt@^0.10.6
- runed@^0.37.1
- utils
- window/index.ts
- window/window.svelte
- bits-ui@^2.16.5
- utils
- button.svelte
- shadcn-svelte-button
- shadcn-svelte-spinner
- active.svelte.ts
- shortcut.svelte.ts
- is-mac.svelte.ts
- use-auto-scroll.svelte.ts
- use-boolean.svelte.ts
- use-clipboard.svelte.ts
- use-media.svelte.ts
- use-promise.svelte.ts
- use-toc.svelte.ts
A component for creating live chats, messaging interfaces, conversation UIs, chat bubbles, message threads, and real-time communication displays.
A code component for displaying syntax-highlighted code blocks, code snippets, programming code, source code, with line numbers, copy functionality, and code highlighting.
A dialog for confirming delete actions.
A button used to copy text to the clipboard, copy code snippets, copy content, clipboard copy functionality with visual feedback and copy confirmation.
A composable emoji picker component for selecting emojis, emoji selector, emoji chooser, emoji reactions, emoji input, with categories, search, and recent emojis.
A field set component for grouping form fields, form groups, input groups, form sections, with labels, descriptions, error states, and validation feedback.
A file drop zone component for drag and drop file uploads, file uploader, file input, drag drop files, file selector, with preview, validation, and multiple file support.
A button linking to a GitHub repository with optional star count, live GitHub stats, repository link button, and smooth star count animation for async data.
An image cropper component for cropping images, image editor, photo cropper, image resize, crop tool, with aspect ratio control, preview, and image upload.
An IPv4 address input component for entering IP addresses, network addresses, IP input field, with validation, formatting, and octet separation.
A language switcher component for changing locales, i18n language selector, locale switcher, internationalization, translation switcher, and multi-language support.
A light switch component for toggling themes, dark mode toggle, light dark mode switcher, theme toggle button, with smooth animations and visual feedback.
A link component for navigation, anchor links, hyperlinks, styled links, with variants, external link indicators, and active states.
A meter component for displaying scalar measurements, value indicators, gauges, measurement displays, disk usage, storage capacity, with min max values and visual value indication.
A modal component for dialogs, popups, overlays, dialog boxes, modal windows, with backdrop, close functionality, and responsive design.
A natural language processing date input component for parsing date strings, smart date input, date picker with NLP, text to date conversion, and date suggestions.
A component for incrementing and decrementing a number.
A password component for password input fields, secure password entry, password visibility toggle, password strength indicator, and secret input handling.
A phone number input component for telephone numbers, phone number form field, international phone input, country code selector, and phone validation.
A package manager command component for displaying npm, pnpm, yarn, bun commands, install commands, package manager instructions, and copyable command snippets.
A component for renaming files, folders, items, inline editing, editable text, rename input, with validation and keyboard shortcuts.
A snippet component for displaying code snippets, command snippets, text snippets, with copy functionality, variants, and multiline support.
A stepper component for multi-step forms, step navigation, progress indicators, wizard flows, step-by-step processes, with next/previous navigation and step validation.
A split button combining a primary action with a secondary action such as a dropdown menu or alternate command.
A star rating component for ratings, reviews, star selector, 5 star rating, rating input, with half stars, readonly mode, custom colors, and sizes.
A tags input component for tag input fields, multi-tag input, tag selector, chip input, tag management, with add remove tags, and tag validation.
A terminal component for displaying command line interfaces, terminal emulator, CLI display, shell terminal, code examples, with typing animation and command output.
A theme selector component for choosing themes, theme picker, color scheme selector, dark light theme switcher, with multiple theme options and visual preview.
A table of contents component for navigation, document outline, page navigation, TOC sidebar, with anchor links, active section highlighting, and scroll tracking.
A tree view component for displaying hierarchical data, file tree, folder structure, nested lists, directory tree, with expand collapse, custom icons, and selection.
A underline tabs component for displaying tabs, tab navigation, tab selection, tab navigation, and tab selection.
A beautiful styled window component for windowed UI, desktop-style windows, window container, with title bar, close button, and customizable content area.
An extended button component with loading states, promise handling, click handlers, variants, sizes, and disabled states for interactive UI elements.
Automatically add the `data-active` attribute to a link based on its active state. Active link detection, navigation state, route matching, and active link styling.
Add keyboard shortcuts to your application. Keyboard shortcuts, hotkeys, key bindings, keyboard navigation, command shortcuts, and keyboard event handling.
Determine if the user is on a Mac. Platform detection, macOS detection, Mac OS detection, platform-specific UI, and Mac keyboard shortcuts.
Automatically scroll to the bottom of an element when new content is added. Auto scroll, chat scroll, message scroll, scroll to bottom, and dynamic content scrolling.
Simplify working with boolean values. Toggle state, boolean state management, true false toggle, boolean hook, and reactive boolean values.
Copy text to the users clipboard. Clipboard API, copy to clipboard, clipboard copy hook, copy functionality, and clipboard state management.
Track the size of the screen using the standard Tailwind CSS breakpoints. Responsive breakpoints, media queries, screen size detection, mobile desktop detection, and responsive design hooks.
Manage the state of a promise reactively in the absence of {#await}. Promise state management, async state, loading error success states, promise hook, and reactive promises.
Generate a table of contents. TOC generation, document outline, heading extraction, navigation generation, and table of contents hook.