Overview

Styling

Navius primitives ship with zero styles. You bring the CSS (Tailwind, plain CSS, CSS modules, anything) and key it off the discrete data-* state contract.

Unstyled by default

Every part renders a sensible host element with the correct ARIA, and nothing else: no class, no inline style. There is no stylesheet to import and no specificity to fight.

Adding classes

Each part forwards unmatched attributes via @attributes, so a class (or style, id, data-*) you pass lands directly on the underlying element.

razor

<NaviusSwitch class="my-switch" style="--accent: teal">
    <NaviusSwitchThumb class="my-thumb" />
</NaviusSwitch>

Styling state

Primitives reproduce a stable set of discrete, boolean-presence state attributes you can target: data-open / data-closed, data-checked / data-unchecked, data-pressed, data-popup-open, data-highlighted, data-disabled, data-side, data-align. With Tailwind, use the data-[…] variant; with plain CSS, an attribute selector.

Tailwind razor

<NaviusAccordionTrigger
    class="group flex w-full justify-between data-[panel-open]:text-primary">
    Section
    <ChevronIcon class="transition group-data-[panel-open]:rotate-180" />
</NaviusAccordionTrigger>

Plain CSS css

.my-switch { background: #d4d4d8; }
.my-switch[data-checked] { background: #18181b; }
.my-switch[data-disabled] { opacity: .5; }

Positioning variables

Anchored parts (Popover, Tooltip, Menu, Select, Preview Card, Context Menu, Menubar) are placed by the engine, which writes the resolved geometry onto the positioner element so you can drive transform-origins and arrow placement. Available custom properties: --transform-origin, --available-width/-height, --anchor-width/-height, plus data-side and data-align.

Plain CSS css

.popover-popup {
  transform-origin: var(--transform-origin);
  max-height: var(--available-height);
}
.popover-popup[data-side="top"] { animation: slide-up .15s; }
.popover-popup[data-side="bottom"] { animation: slide-down .15s; }

Size variables

Collapsible and Accordion publish their panel's natural size as a CSS variable so you can transition height from 0 to that value (it can't be animated to auto in CSS). Use --accordion-panel-height / --collapsible-panel-height (and the matching -width).

Plain CSS css

.accordion-panel {
  overflow: hidden;
  height: var(--accordion-panel-height);
  transition: height .2s ease-out;
}
.accordion-panel[data-starting-style],
.accordion-panel[data-ending-style] { height: 0; }