CDN

The simplest way to get started. No build step needed.

<link rel="stylesheet" href="https://unpkg.com/ciderui/dist/ciderui.cdn.css">

<!-- Optional: interactive components -->
<script src="https://unpkg.com/ciderui/js/dialog.js"></script>
<script src="https://unpkg.com/ciderui/js/dropdown-menu.js"></script>
<script src="https://unpkg.com/ciderui/js/tabs.js"></script>
<script src="https://unpkg.com/ciderui/js/select.js"></script>
<script src="https://unpkg.com/ciderui/js/toast.js"></script>

Package Manager

Requires Tailwind CSS v4. 

npm install ciderui
pnpm add ciderui
bun add ciderui
yarn add ciderui

In your main CSS file:

@import "tailwindcss";
@import "ciderui";

Interactive Components (Optional)

Most components are pure CSS. For interactive behavior (dialog backdrop close, dropdown menus, tabs, select, toasts), import the JS files: 

import "ciderui/dialog.js";
import "ciderui/dropdown-menu.js";
import "ciderui/tabs.js";
import "ciderui/select.js";
import "ciderui/toast.js";

Dark Mode

Cider UI uses a class-based dark mode. Add the dark class to your <html> element: 

<html class="dark">
  ...
</html>

Or toggle it with JavaScript:

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