npm package: @hwrok/shadcn-svelte-package
Description: 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.
Latest version: 0.0.3

# @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](https://shadcn-svelte.com/) and [shadcn-svelte-extras](https://shadcn-svelte-extras.com/), packaged as a single Svelte 5 library with [Tailwind CSS](https://tailwindcss.com/) v4 and [Bits UI](https://bits-ui.com/).

## Install

```sh
pnpm add @hwrok/shadcn-svelte-package
```

### Peer dependencies

```sh
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:

```css
@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](https://shadcn-svelte.com/docs/theming) for reference.

## Usage

Every component is available as a subpath export matching its directory name. Code examples from the [shadcn-svelte docs](https://shadcn-svelte.com/docs/components) and [shadcn-svelte-extras docs](https://shadcn-svelte-extras.com/) work as-is — just swap the import path.

```svelte
<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:

```ts
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:

```ts
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](https://shadcn-svelte.com/docs/components) and [shadcn-svelte-extras](https://shadcn-svelte-extras.com/) APIs.

## Acknowledgements

This library repackages components from [shadcn-svelte](https://shadcn-svelte.com/) and [shadcn-svelte-extras](https://shadcn-svelte-extras.com/) for convenience. All credit for the component design and implementation goes to those projects.