H
UI by hampton.io
Back to Components
Display

Separator

Visual divider between content sections.

PropsUsage ExampleVariations
Overview
Details
Left
Right

Dependencies

  • clsx
  • tailwind-merge
  • @radix-ui/react-separator

Files

  • components/ui/separator.tsx

Installation

Using shadcn CLI

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

Manual installation

Copy the component file to your project and install dependencies:

npm install clsx tailwind-merge @radix-ui/react-separator

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.