H
UI by hampton.io
Back to Components
Charts

Bar Chart

Simple bar chart with labels, values, and optional horizontal layout.

PropsUsage ExampleVariations
Mon18
Tue26
Wed22
Thu30
Fri28
Mon
18
Tue
26
Wed
22
Thu
30
Fri
28

Dependencies

  • clsx
  • tailwind-merge

Files

  • components/ui/bar-chart.tsx

Installation

Using shadcn CLI

npx shadcn add bar-chart --url https://ui.hampton.io

Manual installation

Copy the component file to your project and install dependencies:

npm install clsx tailwind-merge

Related Charts Components

Bar Chart Simple

Basic bar chart with vertical or horizontal layouts.

Chart Container

Wrapper component with title, subtitle, legend slot, and responsive chart area.

Donut Chart

Ring chart with centered value and label.

Leaderboard

Ranked list with positions, avatars, scores, and optional trend badges.

Line Chart

Line chart with multiple series, points, labels, and optional area fill.

Metric Grid

Responsive grid of stat cards with configurable column counts.