Shadcn UI Kit for Tailwind CSS

A lightweight, themeable CSS component library inspired by shadcn/ui.
No JavaScript framework required – just drop it into your HTML and start building interfaces with light/dark mode.

I built this because I love the look of shadcn/ui but needed something that works without React, and I wanted full control over the styles. It’s basically a set of CSS classes you can use anywhere – whether you’re prototyping, building a static site, or adding some polish to a server‑rendered app.

Preview

Light Mode	Dark Mode

Features

• 📦 Pure CSS – no JavaScript dependencies, works with any project
• 🎨 Customizable via CSS variables – change colors, border radius, spacing, etc.
• 🌗 Light & Dark mode out of the box – toggle with a single .dark class
• 🧩 Reusable components – buttons, cards, forms, badges, alerts, avatars, and more
• ⚡ Works with Tailwind CSS – use it alongside Tailwind utilities or standalone
• 🔧 No build step – include via a local file

Installation

Download shadcn-ui-kit.css and include it in your project:

HTML: rel="stylesheet" href="path/to/shadcn-ui-kit.css"

Usage

Click me Outline Delete

Card Title

Some content goes here.

Beta

Accept terms

Dark Mode

The kit includes a dark theme that activates when the .dark class is present on a parent element (usually or ).

Toggle it with JavaScript:

JS: document.documentElement.classList.toggle('dark');

Or set it permanently:

html

...

License

MIT © KriptoSamu – use it freely in personal or commercial projects.

Credits

Inspired by the gorgeous shadcn/ui components. This is a fan‑made, framework‑free interpretation – not affiliated with the original project. Built with ☕ and CSS variables during late‑night coding sessions.