Helps users quickly move past navigation, menus, and headers to reach main content.
Installation
npx shadcn@latest add @caprice/skip-navigationnpm install @caprice-ui/reactInstall the following dependencies:
npm install @base-ui/react lucide-reactAdd a cn helper
import { defineConfig, type VariantProps } from 'cva';import { twMerge } from 'tailwind-merge';export const { compose, cva, cx: cn,} = defineConfig({ hooks: { onComplete: (className: string) => twMerge(className), },});export type { VariantProps };Copy and paste the following code into your project.
import { mergePropsN, useRender } from '@base-ui/react';import { cn } from '@/lib/utils';/** * Groups the skip navigation links. * Renders a `<nav>` element. * * Documentation: [Caprice UI Skip Navigation](https://caprice-ui.com/docs/components/skip-navigation) */export namespace Root { export type Props = useRender.ComponentProps<'nav'>;}export function Root({ className, render, ...props }: Root.Props) { const defaultProps: useRender.ElementProps<'nav'> & { 'data-slot'?: string } = { 'data-slot': 'skip-navigation', 'aria-label': 'Skip link navigation', className: cn('', className), }; return useRender({ defaultTagName: 'nav', render, props: mergePropsN<'nav'>([defaultProps, props]), });}/** * A list of individual skip navigation links. * Renders a `<ul>` element. * * Documentation: [Caprice UI Skip Navigation](https://caprice-ui.com/docs/components/skip-navigation) */export namespace List { export type Props = useRender.ComponentProps<'ul'>;}export function List({ className, render, ...props }: List.Props) { const defaultProps: useRender.ElementProps<'ul'> & { 'data-slot'?: string } = { 'data-slot': 'skip-navigation-list', className: cn('', className), }; return useRender({ defaultTagName: 'ul', render, props: mergePropsN<'ul'>([defaultProps, props]), });}/** * An individual skip navigation link. * Renders a `<li>` element. * * Documentation: [Caprice UI Skip Navigation](https://caprice-ui.com/docs/components/skip-navigation) */export namespace Item { export type Props = useRender.ComponentProps<'li'>;}export function Item({ className, render, ...props }: Item.Props) { const defaultProps: useRender.ElementProps<'li'> & { 'data-slot'?: string } = { 'data-slot': 'skip-navigation-item', className: cn('', className), }; return useRender({ defaultTagName: 'li', render, props: mergePropsN<'li'>([defaultProps, props]), });}/** * A link that can be used to skip navigation. * Renders an `<a>` element. * * Documentation: [Caprice UI Skip Navigation](https://caprice-ui.com/docs/components/skip-navigation) */export namespace Link { export type Props = useRender.ComponentProps<'a'>;}export function Link({ className, render, ...props }: Link.Props) { const defaultProps: useRender.ElementProps<'a'> & { 'data-slot'?: string } = { 'data-slot': 'skip-navigation-link', className: cn( '-translate-y-[150%] absolute inset-x-0 top-0 bottom-auto z-50 mx-auto inline-block w-fit transform rounded-b-md bg-background px-6 py-3 text-foreground text-xl outline-none transition-[translate,color] duration-200 focus:translate-y-0', 'will-change-transform focus:outline-2 focus:outline-primary/80 focus:outline-solid focus:outline-offset-2', className ), }; return useRender({ defaultTagName: 'a', render, props: mergePropsN<'a'>([defaultProps, props]), });}Update the import paths to match your project setup.
Usage
import * as SkipNavigation from "@/components/caprice-ui/skipnavigation"import * as SkipNavigation from "@caprice-ui/react/skipnavigation"