H
UI by hampton.io
Back to Components
Display

Definition List

Definition list with term and description pairs in a card layout.

PropsUsage ExampleVariations
Response time
Average of 320 ms across the last 24 hours.
Data retention
Events stored for 18 months in regional storage.
Sync cadence
Updates every 5 minutes for connected sources.
Access level
Read and write for workspace admins.

Dependencies

  • clsx
  • tailwind-merge

Files

  • components/ui/definition-list.tsx

Installation

Using shadcn CLI

npx shadcn add definition-list --url https://ui.hampton.io

Manual installation

Copy the component file to your project and install dependencies:

npm install clsx tailwind-merge

Related 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.