Components

Pills

A glass track with a glowing pill that slides to the current page. In a nav, it is site navigation; works with any router.

Import

import { Pills, Pill, PillIndicator } from '@rinzai/zen';

API reference

<Pills>

A glass track of pills, with an optional glowing pill that slides to the active one: whichever has aria-current="page" (router links such as React Router's NavLink set it themselves) or aria-selected="true". It adds no role of its own; what you wrap it in says what it is. Site navigation:

<nav aria-label="Main">
    <Pills>
        <PillIndicator />
        <Pill href="/month" active>Month</Pill>
        <Pill asChild><NavLink to="/goals">Goals</NavLink></Pill>
    </Pills>
</nav>

For tabs that switch panels in place, use Tabs with <TabList variant="pills">.

No props of its own; it accepts the props of the element it renders.

<Pill>

One pill: a link. active marks the current page. With asChild, the styles go onto your own element instead (a router's Link or NavLink).

Prop	Type	Default
`active` This pill is the current page (aria-current="page").	`boolean`	`—`
`asChild` Style the single child element (e.g. a router link) instead of rendering an <a>.	`boolean`	`—`

<PillIndicator>

The glowing pill under the active item. Place it inside Pills; hidden while none is active.

Prop	Type	Default
`className`	`string`	`—`