Navigation row

Offer a clear row-level route or setting with supporting context.

Preview

Installation

Copy the source files below into your project and preserve their relative imports. Load the shared tokens and the listed styles. Then install the dependencies. A standalone local registry endpoint is not available for this component.

Install

npm install lucide-react

Source files

src/components/ui/navigation-row.tsx

Basic usage

123import { NavRow } from "@/components/ui/navigation-row";

<NavRow label="Family calendar" description="See what is next." />

Use the exported component in the composition shown above. Keep labels, data, and callbacks in the consuming application.

Structure

Examples

The Preview above is the canonical navigation-row example. Compose it with the public parts shown in Structure.

API reference

navigation-row properties
Prop	Type	Description
`label`required	`string`	Sets label.
`description`	`string \| undefined`	Sets description.
`icon`	`ReactNode`	Sets icon.
`badge`	`ReactNode`	Sets badge.
`onClick`	`(() => void) \| undefined`	Sets on click.
`className`	`string \| undefined`	Sets class name.