Installation - DengaUI

1. Install the package

DengaUI is a Tailwind CSS plugin. Install it alongside Tailwind v4:

npm install dengaui tailwindcss @tailwindcss/cli

Or with your preferred package manager:

pnpm add dengaui tailwindcss @tailwindcss/cli

yarn add dengaui tailwindcss @tailwindcss/cli

bun add dengaui tailwindcss @tailwindcss/cli

2. Configure your CSS

In your main CSS file, import Tailwind and register the DengaUI plugin:

/* app.css */ @import "tailwindcss"; @plugin "dengaui";

That's it. No tailwind.config.js needed. Tailwind v4 uses the CSS-first configuration approach, and DengaUI registers its components, utilities, and theme tokens automatically through the plugin directive.

3. Build your CSS

Run the Tailwind CLI to compile your stylesheet:

npx @tailwindcss/cli -i app.css -o dist/output.css --watch

Or if you use Vite, PostCSS, or another bundler, Tailwind v4 integrates natively. See the Tailwind CSS docs for framework-specific guides.

4. Start using components

Add DengaUI classes to your HTML. All component classes are prefixed with dui-:

<button class="dui-btn dui-btn-primary">Get Started</button> <div class="dui-card dui-card-bordered"> <div class="dui-card-body"> <h3 class="dui-card-title">Hello World</h3> <p>DengaUI is ready to use.</p> </div> </div>

Hello World

DengaUI is ready to use.

CDN (Quick Prototyping)

For quick demos or prototyping, you can load the pre-built CSS from a CDN. This includes all components and the default theme:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dengaui@latest/dist/dengaui.min.css" /> <script src="https://cdn.unpkg.com/@tailwindcss/browser@4"></script>

The CDN build is great for experiments but does not support tree-shaking or custom themes. For production, use the npm package.

Alpine.js (Optional)

DengaUI components are CSS-first and work without JavaScript. For interactive behavior like dropdowns, modals, and tabs, add Alpine.js:

npm install alpinejs

Then initialize it in your entry file:

// main.js import Alpine from 'alpinejs'; window.Alpine = Alpine; Alpine.start();

Or use the CDN script tag:

Alpine.js is entirely optional. DengaUI's styling works independently, and you can use any JavaScript framework for interactivity.