Matcha UI
DocsInstallIcons

Start

  • Introduction
  • Installation
  • Phosphor icons

Components

  • Accordion
  • Alert
  • Alert Dialog
  • Avatar
  • Badge
  • Breadcrumb
  • Button
  • Card
  • Line Chart Card
  • Bar Chart Card
  • Donut Chart Card
  • Checkbox
  • Command
  • Dialog
  • Dropdown Menu
  • Input
  • Label
  • Navigation Menu
  • Pagination
  • Popover
  • Progress
  • Radio Group
  • Scroll Area
  • Select
  • Separator
  • Sheet
  • Skeleton
  • Slider
  • Sonner (Toast)
  • Switch
  • Table
  • Tabs
  • Textarea
  • Collapsible
  • Sidebar navigation
  • Page header
  • Empty state
  • KPI card
  • Data table toolbar
  • Tooltip
← All components

Separator

Visual dividers in menus, settings, and layouts.

Section A
Section B

Example

import { Separator } from "matcha-ui";

<div className="flex flex-col gap-2 max-w-xs">
  <span>Section A</span>
  <Separator />
  <span>Section B</span>
</div>

Created by Jacob Olenick & DesignOps Studio