Twigs Logo
Playground
Get StartedComponentsIconsEditorTools

Separator

A visual divider that separates content sections both horizontally and vertically. Perfect for organizing layouts, navigation menus, and content sections with clean visual separation.

Import

import { Separator } from "@sparrowengg/twigs-react";

Usage

const SeparatorExample = () => {
  return (
    <Flex css={{ alignItems: "center", height: "40px", gap: "$4" }}>
        <Text css={{ fontSize: "$sm" }}>Home</Text>
        <Separator orientation="vertical" />
        <Text css={{ fontSize: "$sm" }}>About</Text>
        <Separator orientation="vertical" />
        <Text css={{ fontSize: "$sm" }}>Contact</Text>
    </Flex>
  );
};

Props

Separator

PropTypeDefault
orientation?
'horizontal' | 'vertical'
'horizontal'
decorative?
boolean
false
asChild?
boolean
false
css?
object
-

Data Attributes

These props are used for the conditional rendering of the components

PropTypeDefault
[data-orientation]?
'horizontal' | 'vertical'
-

Select

A powerful dropdown component for selecting single or multiple options from a list. Perfect for forms, filters, and data selection with search functionality, async loading, and customizable styling options.

Slider

A powerful input component for selecting values within a specified range. Perfect for volume controls, form inputs, and interactive value selection with support for single values, ranges, custom styling, and comprehensive accessibility features.