Skip to main content
ninna-ui

Styling

Learn how to customize component styles using data-slot, className, and Tailwind CSS.

className Prop

Every Ninna UI component accepts a className prop for direct Tailwind CSS customization.

All components spread ...props on their root element, so any standard HTML attribute works — including className,style,id, and event handlers.

import { Button , Code } from "@ninna-ui/primitives";


// Override or extend styles with className
<Button className="rounded-full shadow-lg">Rounded Button</Button>


// Compose with Tailwind utilities
<Button className="w-full sm:w-auto">Responsive Width</Button>

data-slot API

Target component internals with CSS using data-slot attributes — no component code modification needed.

Every Ninna UI component renders data-slot attributes on its root and meaningful sub-elements. There are 98 data-slot attributes across all components. This gives you deep CSS customization without modifying component internals.

CSS Targeting

Style inner elements with data-slot selectors

/* Target component internals with data-slot */


/* Style the alert close button */
[data-slot="close"] {
  opacity: 0.5;
  transition: opacity 0.2s;
}
[data-slot="close"]:hover {
  opacity: 1;
}


/* Style the checkbox indicator */
[data-slot="indicator"] {
  border-radius: var(--radius-sm);
}


/* Style all button icons */
[data-slot="icon"] {
  width: 1.25rem;
  height: 1.25rem;
}

Slot Structure Examples

data-slot attribute structure

<!-- Available data-slot values per component -->


<!-- Button -->
<button data-slot="button">
  <span data-slot="icon">...</span>
  Click me
</button>


<!-- Alert -->
<div data-slot="alert">
  <div data-slot="icon">...</div>
  <div data-slot="content">
    <div data-slot="title">Title</div>
    <div data-slot="description">Description</div>
  </div>
  <button data-slot="close">×</button>
</div>


<!-- Checkbox -->
<label data-slot="checkbox">
  <input class="sr-only peer" />
  <div data-slot="control">
    <svg data-slot="indicator">...</svg>
  </div>
</label>

Common slots: icon, content, title, description, indicator, track, thumb, close, label

Tailwind Integration

Ninna UI's CSS variables work seamlessly with Tailwind CSS v4.

The @theme inline block in each theme exposes all 31 CSS variables as Tailwind utilities. Use them anywhere in your Tailwind classes.

Use Ninna UI variables in your own styles

/* Your app's CSS file */
@import "tailwindcss";
@import "@ninna-ui/core/theme/presets/default.css";


/* Use Ninna UI CSS variables in custom Tailwind utilities */
.my-card {
  background: var(--color-base-100);
  border: 1px solid var(--color-base-300);
  border-radius: 0.5rem;
  color: var(--color-base-content);
}


/* Or use the semantic Tailwind classes directly */
.my-card {
  @apply bg-base-100 border border-base-300 rounded-lg text-base-content;
}

Custom Variants

Create custom component variants using data-slot and CSS.

Combine data-slot with other data attributes to create custom variants without modifying component source code.

Custom variant examples

/* Create custom component styles using data-slot + data-* */


/* Custom "pill" button variant */
[data-slot="button"][data-variant="pill"] {
  border-radius: 9999px;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}


/* Custom alert with left accent bar */
[data-slot="alert"] {
  border-left: 4px solid var(--color-primary);
  border-radius: 0 0.5rem 0.5rem 0;
}


/* Style disabled state across all form inputs */
[data-slot="input"]:disabled,
[data-slot="textarea"]:disabled {
  background: var(--color-base-50);
  cursor: not-allowed;
}