Data-slot Customization: Styling Components Without Source Ownership

The biggest argument for copy-paste libraries like shadcn/ui is source ownership: if you own the source, you can customize anything. But what if you could customize any component internal without owning the source? That's what data-slot CSS targets do.

What are data-slot attributes?

Every Ninna UI component exposes data-slot attributes on its internal DOM elements. These are stable, documented CSS hooks that let you target any part of a component:

/* Target the button's root element */
[data-slot="button"] {
  border-radius: 9999px;
}

/* Target the modal's backdrop */
[data-slot="modal-overlay"] {
  backdrop-filter: blur(8px);
}

/* Target the input's wrapper */
[data-slot="field-wrapper"] {
  margin-bottom: 1rem;
}

Using data-slot with Tailwind

You can also use data-slot selectors with Tailwind's arbitrary variant syntax:

<Button className="data-[slot=button]:rounded-full">
  Pill button
</Button>

<Input className="data-[slot=input]:border-2" />

Why this is better than source ownership

• Updates are safe — npm update won't overwrite your customizations because they're in your CSS, not the component source.
• No merge conflicts — your customizations are separate from the library code.
• No !important hacks — data-slot selectors are specific enough to override defaults.
• No component forks — you don't need to maintain a modified version of the component.
• Works across all components — 98 data-slot targets cover every component internal.

When you still need source ownership

Honesty matters: if you need to change a component's behaviour (not just its styling), data-slot won't help. Adding a new prop, changing the render order, or modifying event handling requires source access. For those cases, shadcn/ui's copy-paste model is genuinely better.

But for the 90% case — 'I want this button to be pill-shaped, this input to have a thicker border, this card to have a gradient' — data-slot CSS targets are a cleaner, more maintainable solution than owning the source.

The full list

Ninna UI exposes 98 data-slot targets across all components. The full list is available in the docs and in llms-full.txt for AI agents. Each component's doc page lists its data-slot targets in the API reference section.