Page header

A project page header that folds into a compact bar as you scroll, with tabs whose counts roll.

npx shadcn@latest add @silicon-ui/page-header
Loading…

Installation

With the shadcn CLI

npx shadcn@latest add @silicon-ui/page-header

Manually

  1. Install the dependencies.

    npm install @radix-ui/react-dropdown-menu @radix-ui/react-tabs lucide-react motion

  2. Copy these files into your project. Shared files are skipped if you already have them.

    • components/silicon-ui/blocks/page-header/page-header.tsx
    • components/silicon-ui/blocks/page-header/page-header.module.css
    • components/silicon-ui/progress/progress.tsx shared
    • components/silicon-ui/progress/progress.module.css shared
    • components/silicon-ui/button/button.tsx shared
    • components/silicon-ui/button/button.module.css shared
    • components/silicon-ui/badge/badge.tsx shared
    • components/silicon-ui/badge/badge.module.css shared
    • components/silicon-ui/avatar-group/avatar-group.tsx shared
    • components/silicon-ui/avatar-group/avatar-group.module.css shared
    • components/silicon-ui/avatar/avatar.tsx shared
    • components/silicon-ui/avatar/avatar.module.css shared
    • components/silicon-ui/lib/silicon-provider.tsx shared
    • components/silicon-ui/animated-counter/animated-counter.tsx shared
    • components/silicon-ui/animated-counter/animated-counter.module.css shared

  3. Install the foundation once per app for the design and motion tokens: npx shadcn@latest add @silicon-ui/silicon-foundation

Usage

Source codetsx
import { PageHeader } from "@/components/silicon-ui/blocks/page-header/page-header";

Dependencies

npm
@radix-ui/react-dropdown-menu@radix-ui/react-tabslucide-reactmotion
Registry
silicon-motion-tokensanimated-counteravataravatar-groupbadgebuttonprogress