@hwrok/shadcn-svelte-package

shadcn-svelte as a proper component library. Install it, import it, use it — no copying components into your project, no ejecting, no managing upstream updates yourself.

If you like the shadcn ecosystem but want something closer to the Mantine or Radix Themes experience — a dependency you pnpm add rather than a CLI you scaffold from — this is that. All the components from shadcn-svelte and shadcn-svelte-extras, packaged as a single Svelte 5 library with Tailwind CSS v4 and Bits UI.

Install

pnpm add @hwrok/shadcn-svelte-package

Peer dependencies

pnpm add -D svelte tailwindcss bits-ui tailwind-variants

Tailwind CSS setup

Add the following import to your app's CSS file so Tailwind detects the classes used by this library:

@import '@hwrok/shadcn-svelte-package/tailwind.css';

This import includes the standard shadcn @theme mappings (e.g., --color-primary: var(--primary)) so library components that use @apply can resolve custom utilities. It does not set actual color values — you still need to define your own shadcn theme CSS custom properties (--background, --primary, etc.) in your app's CSS. Your @theme block will override the defaults. See the shadcn-svelte theming docs for reference.

Usage

Every component is available as a subpath export matching its directory name. Code examples from the shadcn-svelte docs and shadcn-svelte-extras docs work as-is — just swap the import path.

<script lang="ts">
  // Simple component — import and use directly
  import { Button } from '@hwrok/shadcn-svelte-package/button';

  // Compound component — namespace import, use sub-components
  import * as Dialog from '@hwrok/shadcn-svelte-package/dialog';
</script>

<Button variant="secondary">Click me</Button>

<Dialog.Root>
  <Dialog.Trigger>Open</Dialog.Trigger>
  <Dialog.Content>
    <Dialog.Header>
      <Dialog.Title>Title</Dialog.Title>
    </Dialog.Header>
  </Dialog.Content>
</Dialog.Root>

The main entry point also works if you prefer namespace imports for everything:

import { Button, Dialog } from '@hwrok/shadcn-svelte-package';
// <Button.Root>, <Dialog.Root>, etc.

Actions, hooks, and utilities

Actions, hooks, and utility modules are available under scoped subpaths:

import { active } from '@hwrok/shadcn-svelte-package/actions/active';
import { UseClipboard } from '@hwrok/shadcn-svelte-package/hooks/use-clipboard';
import { camelToSnake } from '@hwrok/shadcn-svelte-package/utils/casing';

Compatibility with shadcn-svelte docs

Component code from the shadcn-svelte and shadcn-svelte-extras documentation is directly copy-pasteable. The only change needed is the import path — replace $lib/components/ui/<name> with @hwrok/shadcn-svelte-package/<name>. Component APIs, props, and slot structures are identical.

Components

Components follow the shadcn-svelte and shadcn-svelte-extras APIs.

Acknowledgements

This library repackages components from shadcn-svelte and shadcn-svelte-extras for convenience. All credit for the component design and implementation goes to those projects.