Components
- AccordionNew
- Alert
- Alert DialogNew
- AutocompleteNew
- AvatarNew
- Badge
- Breadcrumb
- Button
- CalendarNew
- CardNew
- Checkbox
- Checkbox GroupNew
- CollapsibleNew
- ComboboxNew
- CommandNew
- Context MenuNew
- Date PickerNew
- DialogNew
- DrawerNew
- EmptyNew
- FieldNew
- FieldsetNew
- FormNew
- FrameNew
- GroupNew
- Input
- Input GroupNew
- KbdNew
- Label
- MenuNew
- MeterNew
- Number Field
- OTP FieldNew
- Pagination
- PopoverNew
- Preview CardNew
- Progress
- Radio Group
- Scroll AreaNew
- Select
- Separator
- SheetNew
- SkeletonNew
- Slider
- Spinner
- StepperNew
- Switch
- Table
- TabsNew
- Textarea
- ToastNew
- ToggleNew
- Toggle GroupNew
- ToolbarNew
- Tooltip
Separator
A separator element accessible to screen readers.
Mako UI
Accessible, composable React components for fast product UI.
Blog
Docs
Source
Releases
import { Separator } from "mako-ui/components/separator";
export default function Particle() {
return (
<div className="max-w-72">
<div className="flex flex-col gap-1">
<h4 className="font-medium text-sm">Mako UI</h4>
<p className="text-muted-foreground text-sm">
Accessible, composable React components for fast product UI.
</p>
</div>
<Separator className="my-4" />
<div className="flex items-center gap-4 text-sm">
<div>Blog</div>
<Separator orientation="vertical" />
<div>Docs</div>
<Separator orientation="vertical" />
<div>Source</div>
<Separator orientation="vertical" />
<div>Releases</div>
</div>
</div>
);
}
Usage
import { Separator } from "mako-ui/components/separator"<Separator />API Reference
Separator
Renders as a horizontal line by default with a muted background color.
On This Page