@gwigz/slick-css

A classless CSS component library using shadcn/ui component styles translated to semantic HTML element and attribute selectors. No classes needed, just write plain HTML.

Install

bun add @gwigz/slick-css

Usage

Import the stylesheet:

@import "@gwigz/slick-css";

Or link it directly:

<link rel="stylesheet" href="path/to/slick.min.css" />

CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gwigz/slick-css/dist/slick.min.css" />

Or the static (smaller) variant:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gwigz/slick-css/dist/slick-static.min.css" />

Variants

File	Size	Gzip	Description
slick.css	~46.8 KB	~6.7 KB	Readable, full Tailwind var compatibility
slick.min.css	~37.0 KB	~6.1 KB	Minified, full Tailwind var compatibility (default)
slick-static.css	~42.2 KB	~6.2 KB	Readable, dead --tw-* vars removed
slick-static.min.css	~33.1 KB	~5.7 KB	Minified, smallest size

The default export (@import "@gwigz/slick-css") resolves to slick.min.css which preserves all Tailwind variable machinery for maximum compatibility.

The static variants (@import "@gwigz/slick-css/static") strip unused --tw-* variable writes for a smaller footprint. Use these if you don't need to compose with Tailwind utilities at runtime.

Then write plain HTML:

<button>Primary</button>
<button secondary>Secondary</button>
<button destructive>Delete</button>
<button outline>Outline</button>
<button ghost>Ghost</button>

<kbd>Badge</kbd>
<kbd destructive>Error</kbd>

<article>
  <header>
    <h3>Card Title</h3>
    <p>Description</p>
  </header>
  <section>Content</section>
  <footer>
    <button>Action</button>
  </footer>
</article>

<article flush>
  <header><h3>Settings</h3></header>
  <details>
    <summary>Appearance</summary>
    <p>Customize the look and feel.</p>
  </details>
  <details>
    <summary>Notifications</summary>
    <p>Configure alerts.</p>
  </details>
</article>

<input type="text" placeholder="Input" />
<textarea placeholder="Textarea"></textarea>
<select>
  <option>Option</option>
</select>

<input type="checkbox" />
<input type="radio" />
<input type="checkbox" role="switch" />

<progress value="60" max="100"></progress>

<details>
  <summary>Accordion</summary>
  <p>Content</p>
</details>

<dialog>
  <header><h3>Title</h3></header>
  <footer><button>OK</button></footer>
</dialog>

<button tooltip-top="Tooltip text">Hover me</button>

Components

Component	Selector	Variants
Button	button, [type="submit"]	[secondary], [destructive], [outline], [ghost], [link], [sm]
Badge	kbd	[secondary], [destructive], [outline]
Card	article	[empty], [flush]
Input	input:not([type="checkbox"]):not([type="radio"]), textarea	[sm]
Select	select	-
Checkbox	input[type="checkbox"]	-
Radio	input[type="radio"]	-
Toggle	input[type="checkbox"][role="switch"]	-
Dialog	dialog	-
Progress	progress	-
Accordion	details > summary	[left]
Tabs	[role="tablist"], [role="tab"], [role="tabpanel"]	-
Tooltip	[tooltip-top], [tooltip-bottom]	-
Log	samp	-
Separator	hr	-
Spinner	[aria-busy="true"]	-
Label	label	-

Layout Utilities

Utility	Selector	Sizes / Values
Stack	[stack]	xs, md, lg, xl, 2xl
Row	[row]	sm, md, lg
Grid	[grid]	sm, lg, xl
Max Width	[max-w]	xs, md, lg, xl
Align	[align]	left, center, right
Color	[color]	destructive, success, muted
Spacer	[spacer]	-
Truncate	[truncate]	-

Theming

Slick uses CSS custom properties. Override them to customize:

:root {
  --background: oklch(14.5% 0 0deg);
  --foreground: oklch(98.5% 0 0deg);
  --card: oklch(20.5% 0 0deg);
  --card-foreground: oklch(98.5% 0 0deg);
  --primary: oklch(92.2% 0 0deg);
  --primary-foreground: oklch(20.5% 0 0deg);
  --secondary: oklch(26.9% 0 0deg);
  --secondary-foreground: oklch(98.5% 0 0deg);
  --muted: oklch(26.9% 0 0deg);
  --muted-foreground: oklch(70.8% 0 0deg);
  --destructive: oklch(70.4% 0.191 22.216deg);
  --destructive-foreground: oklch(98.5% 0 0deg);
  --success: oklch(72.3% 0.194 142.5deg);
  --success-foreground: oklch(98.5% 0 0deg);
  --border: oklch(100% 0 0deg / 10%);
  --input: oklch(100% 0 0deg / 15%);
  --ring: oklch(55.6% 0 0deg);
  --radius: 0.625rem;
}

Development

bun install
bun run dev        # watch CSS changes
bun run storybook  # launch Storybook at :6006
bun run build      # compile all dist/ variants