Skip to main content

Installation

CDN

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

HTML 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/newlix/ciderui@main/dist/ciderui.cdn.min.css">

<!-- Optional: interactive components -->
<script src="https://cdn.jsdelivr.net/gh/newlix/ciderui@main/js/cider.js"></script>

Package Manager

Requires Tailwind CSS v4. 

npm install ciderui@github:newlix/ciderui
pnpm add ciderui@github:newlix/ciderui
bun add github:newlix/ciderui
yarn add ciderui@github:newlix/ciderui

In your main CSS file:

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

Interactive Components (Optional)

Most components are pure CSS. For interactive behavior (dialogs, popovers, segmented controls, HUD, verification codes), include the JS bundle:

JS 
import "ciderui/cider.js";

Activate Styles

All Cider UI styles — classless elements and component classes — are scoped. Add .cider to an ancestor element to activate them.

HTML 
<!-- Full page -->
<body class="cider">
  <h1>Auto-styled heading</h1>
  <button class="btn-filled">Click me</button>
</body>

<!-- Or scope to a section -->
<main class="cider">
  <h1>Styled here</h1>
  <p>Native elements are styled automatically.</p>
</main>

Use .cider-reset to stop styles from leaking into nested third-party components. See Essentials for details.

Dark Mode

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

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

Or toggle it with JavaScript:

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