Dinachi
  • Docs
  • Playground

Getting started

—Conventions—Installation—CLI—Skills—LLMs

Foundations

—Theming

Integrations

—JSON Render—Playground

Form19

—Autocomplete—Button—Checkbox—Checkbox Group—Combobox—Field—Fieldset—Form—Input—Label—Number Field—OTP Field—Radio—Select—Slider—Switch—Textarea—Toggle—Toggle Group

Display5

—Accordion—Avatar—Badge—Collapsible—Text

Layout4

—Card—Scroll Area—Separator—Toolbar

Navigation4

—Link—Menubar—Navigation Menu—Tabs

Overlay8

—Alert Dialog—Context Menu—Dialog—Drawer—Menu—Popover—Preview Card—Tooltip

Feedback4

—Meter—Progress—Skeleton—Toast

Motion19

—Animated IconNew—Animated ListNew—Animated TabsNew—CarouselNew—Compare SliderNew—Expandable CardNew—Hold to ConfirmNew—Load TransitionNew—MarqueeNew—Number TickerNew—Progress RingNew—Scroll ProgressNew—Scroll RevealNew—SortableNew—Stagger ListNew—Streaming TextNew—Swipeable RowNew—Text MorphNew—Text ShimmerNew

Separator

A visual divider used to separate and organize content.

View Source

#Installation

npx @dinachi/cli@latest add separator

#Usage

tsx
import { Separator } from "@/components/ui/separator"

#Examples

#API Reference

PropTypeDefaultDescription
orientation'horizontal' | 'vertical''horizontal'Sets the separator orientation.
decorativebooleantrueWhether the separator is decorative only.
Previous:Select
Next:Skeleton