Three-column footer link grid with uppercase section headings and plain-text links underneath each.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { Nav21 } from "@/components/beste/piece/nav21";
<Nav21
columns={[
{
"heading": "Product",
"links": [
"Overview",
"Pricing",
"Changelog",
"Roadmap"
]
},
{
"heading": "Company",
"links": [
"About",
"Careers",
"Press",
"Contact"
]
},
{
"heading": "Resources",
"links": [
"Docs",
"Community",
"Status"
]
}
]}
/>Docs-style on-this-page list with left borders and a primary active rail on the current section.
Horizontal tabs with a thin bottom rail and a primary underline under the active label.
Numbered pagination with prev/next chevrons, ellipsis truncation, and a filled primary active tile.
Multi-step stepper with emerald done, primary current, and muted pending tiles linked by colored rails.
Compact breadcrumb trail with chevron separators and the trailing crumb rendered in bold.
Numbered pagination with prev/next arrows and ellipses for long ranges. Active page flips to foreground.