Badge & Separator Test

Testing merged Shadcn + Relume components

Badge Variants

Default

Secondary

Destructive

Outline

Custom Badge Sizes

Extra Small (default)

Small

Medium

Large

Pill Badges (Relume Style)

Pill Default

Pill Secondary

Pill Destructive

Pill Outline

Badges with Content

Status:

Active

Priority:

High

Version:

v2.1.0

Tags:

React

TypeScript

Tailwind

Horizontal Separators

Default (full width)

Custom width

Short separator

Vertical Separators

Between inline elements

Item 1

Item 2

Item 3

Custom height

Left

Right

Combined Example

Project Dashboard

Beta

Status

Active

Priority

High

Version

v1.0.0

React

Next.js

TypeScript

Tailwind CSS