Header
A flexible section header component with icon, title, description, size variants, action slots, and configurable heading level for accessibility. Includes staggered reveal animation, icon hover effects, loading skeleton state, and compound components for custom layouts.
Installation
$ npx shadcn@latest add @orecus/headerDependencies:
motion
Registry:
skeleton@orecus/animation
Component
With icon and description
Components
Browse and install UI components
With action button
Documents
Manage your documents
With multiple actions
Team Members
Manage team access and permissions
Title only
Simple Header
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title* | string | — | The title text |
size | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Size variant affecting font size and semantic heading level (xl=h1, lg=h2, md=h3, sm=h4) |
description | string | — | The description text below the title |
icon | LucideIcon | — | The icon to display (from lucide-react) |
actions | ReactNode | — | Content to render in the actions area (right side). Use Fragment to compose multiple items. |
loading | boolean | false | Shows skeleton loading state when true |
animated | boolean | true | Whether to animate the entrance with staggered fade-in and slide-up effects |
className | string | — | Additional CSS classes for the container |
titleClassName | string | — | Additional CSS classes for the title |
iconClassName | string | — | Additional CSS classes for the icon |
iconContainerClassName | string | — | Additional CSS classes for the icon container |
Compound Components
Header.Root
The root container for the header.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | The children of the header |
className | string | — | Additional CSS classes |
loading | boolean | — | Whether the component is in a loading state |
Header.Description
A description text component for the header.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | The description text |
className | string | — | Additional CSS classes |
animationDelay | number | — | Delay for the enter animation |
Header.Actions
A container for header actions (buttons, etc.).
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | The action elements |
className | string | — | Additional CSS classes |
animationDelay | number | — | Delay for the enter animation |