# @marko-ui/shadcn

shadcn/ui ported to Marko 6 — component source and the 8 shadcn style
layers, for the import distribution path.

[![npm version](https://img.shields.io/npm/v/@marko-ui/shadcn)](https://www.npmjs.com/package/@marko-ui/shadcn)
[![License: MIT](https://img.shields.io/npm/l/@marko-ui/shadcn)](https://github.com/svallory/marko-ui/blob/main/LICENSE)

Most consumers don't install this package directly — `bunx marko-ui add
<component>` copies the component source straight into your project (the
**copy path**). Install `@marko-ui/shadcn` yourself only for the **import
path**: importing components and style layers from `node_modules` and
compiling them with your own Tailwind build.

```bash
bun add @marko-ui/shadcn marko-zag marko
```

**Requirements:** TypeScript ^5 or ^6. TypeScript 7 (`tsgo`) is not supported — it ships no
in-process compiler API, which the component build depends on.

## Usage

```marko
import Button from "@marko-ui/shadcn/ui/button/button.marko"

<Button variant="outline">Click me</Button>
```

Add the package to your Tailwind `@source` and import one style layer plus
a theme so the `mu-*` hook classes it emits resolve to real styles:

```css
@source "../../node_modules/@marko-ui/shadcn";

@import "@marko-ui/shadcn/styles/globals.css";
@import "@marko-ui/shadcn/styles/style-vega.css" layer(components);
```

Components carry semantic `mu-*` hook classes as a public styling API —
override them or swap style layers from your own stylesheet.

## Docs

Full component list, props, and the copy-vs-import distribution model:
https://marko-ui.saulo.tech