Back to Components
Display
Table
Styled table component with header, body, and row variants.
PropsUsage ExampleVariations
| Invoice | Status | Method | Amount |
|---|---|---|---|
| INV001 | Paid | Credit Card | $250.00 |
| INV002 | Pending | PayPal | $150.00 |
| INV003 | Unpaid | Bank Transfer | $350.00 |
| INV004 | Paid | Credit Card | $450.00 |
| INV005 | Paid | PayPal | $550.00 |
| INV006 | Pending | Bank Transfer | $200.00 |
| INV007 | Unpaid | Credit Card | $300.00 |
| Total | $2,250.00 | ||
Dependencies
- clsx
- tailwind-merge
Files
- components/ui/table.tsx
Installation
Using shadcn CLI
npx shadcn add table --url https://ui.hampton.ioManual installation
Copy the component file to your project and install dependencies:
npm install clsx tailwind-mergeRelated Display Components
Activity Timeline
Vertical activity feed with icon, title, description, timestamp, and connector line.
Animated Counter
Counts up to a target value with Framer Motion easing, optional prefix and suffix, and locale formatting.
Calendar Grid
Monthly calendar grid with events and navigation.
Circular Progress
Progress ring with animated stroke and optional value label, built with SVG and Framer Motion.
Comparison Bar
Side by side comparison bars with labels, values, and percentage split.
Comparison Table
Feature comparison table for plans or tiers with boolean checkmarks.