Components
Loading preview...
A center-aligned, fit‑content navigation bar with a softly rounded, smoothly animated notch indicator and full keyboard accessibility that stands out without visual noise.
@jatin-yadav05
npx shadcn@latest add https://21st.dev/r/jatin-yadav05/notch-navimport { NotchNav } from "@/components/ui/notch-nav"
export default function Page() {
const items = [
{ value: "home", label: "Home" },
{ value: "projects", label: "Projects" },
{ value: "library", label: "Library" },
{ value: "settings", label: "Settings" },
]
return (
<main className="min-h-screen grid place-items-center p-6">
<NotchNav items={items} defaultValue="projects" ariaLabel="Site" />
</main>
)
}