Back to Components
Layout
Dashboard Header
Page header with title, date range picker placeholder, and action buttons area.
PropsUsage ExampleVariations
Analytics Overview
Track your key metrics and performance
Dependencies
- clsx
- tailwind-merge
Files
- components/ui/dashboard-header.tsx
Installation
Using shadcn CLI
npx shadcn add dashboard-header --url https://ui.hampton.ioManual installation
Copy the component file to your project and install dependencies:
npm install clsx tailwind-mergeRelated Layout Components
Calendar
Month view calendar with selectable days and event dots.
Masonry Grid
Pinterest-style masonry layout using CSS columns for cards of varying heights.
Scroll Area
Custom scrollbar styling with overflow detection and gradient fade indicators.
Split Layout
Two-pane layout with a resizable divider, supporting horizontal and vertical orientations.
Split Pane
Resizable side by side panels with a drag handle.