Slick CSS

Classless CSS components inspired by shadcn/ui. Drop in a stylesheet, write semantic HTML, and get beautiful dark-mode components with zero classes.

<link rel="stylesheet" href="https://unpkg.com/@gwigz/slick-css">

npm install @gwigz/slick-css

Base

Color

Radius

0 S M L XL

Buttons

Primary Secondary Destructive Outline Ghost Link Disabled

Small Small Small

Loading Loading Loading

View HTML

---

Badges

Default Secondary Error Outline

View HTML

---

Tooltips

Hover (top) Hover (bottom)

View HTML

---

Alerts

View HTML

---

Cards

Notifications

You have 3 unread messages.

Check your inbox for the latest updates from your team.

Team Members

Manage your team and permissions.

Alice (Admin)

Bob (Editor)

Carol (Viewer)

No items found

There are no patchable objects in the inventory

Recent Activity

Your latest updates

Deployed v2.1.0 to production

Merged PR #42: Fix auth bug

Created branch feature/new-api

Settings

Appearance

Customize the look and feel of the app.

Notifications

Configure how you receive alerts.

Privacy

Manage your data and permissions.

View HTML

---

Tabs

Account Password Billing

Display Name

Email

Save Changes

View HTML

---

Table

Recent invoices

Invoice	Status	Method	Amount
INV-001	Paid	Credit Card	$250.00
INV-002	Pending	PayPal	$150.00
INV-003	Overdue	Bank Transfer	$350.00
INV-004	Paid	Credit Card	$450.00
Total			$1,200.00

View HTML

---

Form Elements

Contact Details

First Name

Last Name

Invalid Field

Disabled

Small Input

Quantity

Select Choose a framework Next.js Remix Astro

Message

---

Notification Preferences

All notifications

Mentions only

None

---

Dark Mode

Airplane Mode

View HTML

---

Accordion

Is it accessible?

Yes. It adheres to the WAI-ARIA design pattern.

Is it styled?

Yes. It comes with default styles that match shadcn/ui aesthetics.

Is it animated?

The chevron rotates on open/close with a CSS transition.

[left] variant

Left-aligned chevron

The chevron appears on the left side instead of the right.

Another item

Useful for navigation-style accordions.

View HTML

---

Progress

View HTML

---

Dialog

Open Dialog

Are you sure?

This action cannot be undone.

This will permanently delete the selected items and remove all associated data.

View HTML

---

Spinner / Skeleton

Loading Loading

Loading...

View HTML

---

Log

Build Output

Compiling slick.css...

Optimized: 46373 → 41657 bytes

Minifying with lightningcss...

Done in 131ms

View HTML

---

Layout Utilities

[stack]

Item 1 Item 2 Item 3

[row]

Item 1 Item 2 Item 3

[grid]

Item 1 Item 2 Item 3

[max-w]

Constrained to max-width

[color]

Destructive text

Success text

Muted text

[spacer]

Left

Right

[truncate]

This is a very long piece of text that will be truncated with an ellipsis when it overflows.

View HTML

---

Theme Variables

Copy these CSS custom properties to customize Slick CSS in your project.