Separator
A visual or semantic divider between content.
- Chromium
- Firefox
- WebKit
- WCAG 2.2 AA
Preview
Above
Below
import { Separator } from "@moe-ui/registry/components/ui/separator";
import { Text } from "@moe-ui/registry/components/ui/text";
import { View } from "react-native";
export default function SeparatorPreview() {
return (
<View className="w-full max-w-sm">
<Text>Above</Text>
<Separator className="my-4" />
<Text>Below</Text>
</View>
);
}
One command, your source
Installation
pnpm dlx @moe-ui/cli@beta add separatorUsage
The CLI installs editable source into your application. Import the component from your configured UI directory:
import { Separator } from "@/components/ui/separator";Variants and composition
Compound parts and variants remain regular source in your project, so you can change them without wrapping a package API.
Public API
The canonical source panel below lists every public export, dependency, and the complete implementation shipped by the registry.
Keyboard and accessibility
Semantic roles, disabled state, visible focus, and contrast are verified in the component browser matrix.
Browser support
This beta is release-tested in Chromium, Firefox, and WebKit in light and dark themes. See the web compatibility matrix for the current gate.
Nothing hiddenCanonical source and public exports1 exports
Separator"use client";
import { cn } from "../../lib/utils";
import * as SeparatorPrimitive from "@rn-primitives/separator";
function Separator({
className,
orientation = "horizontal",
decorative = true,
...props
}: SeparatorPrimitive.RootProps &
React.RefAttributes<SeparatorPrimitive.RootRef>) {
return (
<SeparatorPrimitive.Root
decorative={decorative}
orientation={orientation}
className={cn(
"bg-border shrink-0",
orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
className,
)}
{...props}
/>
);
}
export { Separator };