Multi-step stepper with emerald done, primary current, and muted pending tiles linked by colored rails.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { Nav24 } from "@/components/beste/piece/nav24";
<Nav24
steps={[
{
"label": "Account",
"state": "done"
},
{
"label": "Team",
"state": "done"
},
{
"label": "Billing",
"state": "current"
},
{
"label": "Done",
"state": "pending"
}
]}
/>Numbered pagination with prev/next chevrons, ellipsis truncation, and a filled primary active tile.
Docs-style on-this-page list with left borders and a primary active rail on the current section.
Three-column footer link grid with uppercase section headings and plain-text links underneath each.
Numbered pagination with prev/next arrows and ellipses for long ranges. Active page flips to foreground.
URL-like path breadcrumb using mono segments with forward-slash dividers and a trailing chevron.
Rounded segmented tabs riding a muted track, with a raised card sliding under the active label.