Shadcn Web Components

A collection of framework-agnostic web components built from shadcn-svelte, with TypeScript support and VS Code integration.

Components

• Accordion - A vertically stacked set of interactive headings that each reveal a section of content.
• Alert Dialog - A modal dialog that interrupts the user with important content and expects a response.
• Alert - Displays a callout for user attention.
• Aspect Ratio - Displays content within a desired ratio.
• Avatar - An image element with a fallback for representing the user.
• Badge - Displays a badge or a component that looks like a badge.
• Breadcrumb - Displays the path to the current resource using a hierarchy of links.
• Button - Displays a button or a component that looks like a button.
• Calendar - A calendar component that allows users to select dates.
• Card - Displays a card with header, content, and footer.
• Carousel - A carousel with motion and swipe built using Embla.
• Chart - Beautiful charts. Built using LayerChart. Copy and paste into your apps.
• Checkbox - A control that allows the user to toggle between checked and not checked.
• Collapsible - An interactive component which expands/collapses a panel.
• Combobox - Autocomplete input and command palette with a list of suggestions.
• Command - Fast, composable, unstyled command menu for Svelte.
• Context Menu - Displays a menu to the user — such as a set of actions or functions — triggered by right click.
• Data Table - Powerful table and datagrids built using TanStack Table.
• Date Picker - A date picker component with range and presets.
• Dialog - A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
• Drawer - A drawer component for Svelte.
• Dropdown Menu - Displays a menu to the user — such as a set of actions or functions — triggered by a button.
• Hover Card - For sighted users to preview content available behind a link.
• Input OTP - Accessible one-time password component with copy paste functionality.
• Input - Displays a form input field or a component that looks like an input field.
• Label - Renders an accessible label associated with controls.
• Menubar - A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.
• Navigation Menu - A collection of links for navigating websites.
• Pagination - Pagination with page navigation, next and previous links.
• Popover - Displays rich content in a portal, triggered by a button.
• Progress - Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
• Radio Group - A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.
• Range Calendar - A calendar component that allows users to select a range of dates.
• Scroll Area - Augments native scroll functionality for custom, cross-browser styling.
• Select - Displays a list of options for the user to pick from—triggered by a button.
• Separator - Visually or semantically separates content.
• Sheet - Extends the Dialog component to display content that complements the main content of the screen.
• Sidebar - A composable, themeable and customizable sidebar component.
• Skeleton - Use to show a placeholder while content is loading.
• Slider - An input where the user selects a value from within a given range.
• Switch - A control that allows the user to toggle between checked and not checked.
• Table - A responsive table component.
• Tabs - A set of layered sections of content—known as tab panels—that are displayed one at a time.
• Textarea - Displays a form textarea or a component that looks like a textarea.
• Toggle Group - A set of two-state buttons that can be toggled on or off.
• Toggle - A two-state button that can be either on or off.
• Tooltip - A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

Installation

npm install @shcnwc/shadcn-web-components

Usage

Import the components you need in your HTML:

<script type="module">
  import "@shcnwc/shadcn-web-components";
</script>

<shadcn-button>Click me</shadcn-button>
<shadcn-accordion>...</shadcn-accordion>

For individual component usage, refer to their respective READMEs in the dist directory.

Links

• Source Code
• Documentation
• License

Contributing

Contributions are welcome! Please open an issue or pull request on GitHub.

License

This project is licensed under the MIT License.