shadcn-web-components

A library of framework-agnostic web components built from shadcn-svelte, providing reusable UI components with TypeScript support and Visual Studio Code integration for enhanced developer experience.

Features

• Framework-Agnostic: Components are compiled as standard web components, usable in any JavaScript framework (React, Vue, Angular, vanilla JS, etc.).
• Individual Packages: Each component is published as a separate npm package (@shcnwc/shadcn-<component>-web-component) for modular usage.
• Root Package: Import all components via @shcnwc/shadcn-web-components. This package depends on and re-exports from all individual component packages, allowing installation of everything at once while keeping the main package lightweight.
• TypeScript Support: Includes TypeScript definitions (index.d.ts) for each component.
• VS Code Integration: Generate html-data.json for autocompletion and IntelliSense in Visual Studio Code.
• Customizable: Built with Tailwind CSS and bits-ui for flexible styling and behavior.
• Automated Builds: Uses Vite to generate self-contained bundles with no shared chunks.

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

To use a specific component, install it via npm:

npm install @shcnwc/shadcn-<component-name>-web-component

For example, to install the button component:

npm install @shcnwc/shadcn-button-web-component

To use all components:

npm install @shcnwc/shadcn-web-components

Usage

Importing a Component

Each component is a custom element that can be used in HTML or JavaScript.

<script type="module">
  import '@shcnwc/shadcn-button-web-component';
</script>

<shadcn-button variant="primary" onclick="alert('Clicked!')">Click Me</shadcn-button>

For the root package:

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

<shadcn-button variant="primary">Click Me</shadcn-button>
<shadcn-drawer open>Drawer Content</shadcn-drawer>

Available Components

Components are based on shadcn-svelte and include:

• accordion, accordion-content, accordion-item, accordion-trigger
• button, card, drawer, dialog, and more (see component-props.json for the full list).

Each component has specific attributes defined in its html-data.json file, which provides metadata for attributes like variant, disabled, etc.

Visual Studio Code Integration

To enable autocompletion and IntelliSense for shadcn-* custom elements in VS Code:

1. Build the project to generate dist/html-data.json:

   node scripts/generate-wrappers.js

2. Run the setup script to configure VS Code:

   npx shadcn-web-components setup

   This copies dist/html-data.json to .vscode/html-data.json and updates .vscode/settings.json with:

   {
     "html.customData": ["./html-data.json"]
   }

3. Open a .html file in VS Code to see autocompletion for shadcn-* tags and their attributes.

Development

Prerequisites

• Node.js >= 20
• npm >= 9
• Git (for submodule management)

Setup

1. Clone the repository:

   git clone <your-repo-url>
   cd shadcn-web-components

2. Initialize the shadcn-svelte submodule:

   git submodule init
   git submodule update

3. Install dependencies:

   npm install

Building

The build process generates individual component packages in dist/<component-name> and the root package in dist.

For a full build sequence:

npm run build

To generate wrappers, types, and build components:

node scripts/generate-wrappers.js

To copy additional types (if needed):

node scripts/copy-types.js

This runs:

• scripts/generate-wrappers.js: Generates component files, TypeScript definitions, and html-data.json, and builds each component individually using Vite.
• scripts/generate-readmes.js: Generates README files for components and root.
• scripts/copy-types.js: Copies package.json, index.d.ts, and html-data.json to dist folders.

The output includes:

• dist/<component-name>/index.js: Compiled web component.
• dist/<component-name>/index.js.map: Source map.
• dist/<component-name>/index.d.ts: TypeScript definitions.
• dist/<component-name>/html-data.json: Custom element metadata.
• dist/<component-name>/package.json: npm package configuration.
• dist/<component-name>/README.md: Component-specific documentation.
• dist/package.json, dist/index.js, dist/types.d.ts, dist/html-data.json, dist/README.md: Root package (@shcnwc/shadcn-web-components).

Scripts

• npm run build: Full build (wrappers, READMEs, copy types).
• npm run setup: Configure VS Code for custom element autocompletion.

Publishing

The project uses semantic-release to publish packages to npm. Ensure NPM_TOKEN and GH_TOKEN are set in your CI environment (e.g., GitHub Actions).

To manually publish all packages for testing:

node scripts/publish-sub.js

This publishes the root package and all sub-component packages.

Troubleshooting

• Large Bundle Sizes: Components like drawer may have large bundles (~1 MB) due to dependencies like vaul-svelte. Ensure sideEffects: false is set in package.json files and verify tree-shaking in Vite.
• Missing Components: If components listed in component-props.json are not built, check the build log for Skipping component messages. Ensure corresponding .svelte files exist in src/shadcn-svelte/docs/src/lib/registry/ui.
• Svelte Warnings: If warnings about ...restProps appear, verify that <svelte:options customElement> includes all props from component-props.json. The build script automatically injects these props.
• VS Code Autocompletion: If autocompletion doesn’t work, ensure .vscode/settings.json includes "html.customData": ["./html-data.json"] and that dist/html-data.json was generated.

Contributing

1. Fork the repository.
2. Create a branch (git checkout -b feature/your-feature).
3. Make changes and commit (git commit -m "Add your feature").
4. Push to your fork (git push origin feature/your-feature).
5. Open a pull request.

Please ensure your changes:

• Do not modify the src/shadcn-svelte submodule directly (use git submodule update --remote to sync).
• Update component-props.json for new components or props.
• Run npm run lint and npm run check before committing.

License

MIT License. See LICENSE for details.