styple

Separator

Separate content both visually and semantically.

Example

import { Separator } from "@styple/design-system";

<Flex
  css={{
    gap: "$md",
    alignItems: "center",
    flexDirection: "column",
    width: "100%"
  }}
>
  <Separator />
  <Separator size="lg" />
  <Separator size="sm" />
  <Separator orientation="vertical" size="lg" />
  <Separator orientation="vertical" size="sm" />
</Flex>

API Reference

See Radix-UI Separator (v0.1.4) for details. This only covers styple abstractions.

Separator

A styled component wrapper for the primitive. Custom props:

Prop	Type	Default	Explanation
`size`	`string`	`"fill"`	Size variant.

Select

Sheet