data/primitives/docs/components/separator.mdx
<Description>Visually or semantically separates content.</Description>
<HeroContainer> <SeparatorDemo /> </HeroContainer> <HeroCodeBlock folder="Separator" /><Highlights features={["Supports horizontal and vertical orientations."]} />
Install the component from your command line.
npm install @radix-ui/react-separator
Import all parts and piece them together.
import { Separator } from "radix-ui";
export default () => <Separator.Root />;
The separator.
<PropsTable data={[ { name: "asChild", required: false, type: "boolean", default: "false", description: ( <> Change the default rendered element for the one passed as a child, merging their props and behavior.
Read our <a href="../guides/composition">Composition</a> guide for
more details.
</>
),
},
{
name: "orientation",
type: '"horizontal" | "vertical"',
typeSimple: "enum",
default: '"horizontal"',
description: "The orientation of the separator.",
},
{
name: "decorative",
type: "boolean",
description: (
<span>
When <Code>true</Code>, signifies that it is purely visual, carries no
semantic meaning, and ensures it is not present in the accessibility
tree.
</span>
),
},
]}
/>
<DataAttributesTable data={[ { attribute: "[data-orientation]", values: ["vertical", "horizontal"], }, ]} />
Adheres to the separator role requirements.