Separator

Visually or semantically separates content.

Radix UI
Tailus UI React
An open-source UI component library.
Blog
Docs
Source

Installation

Install the primitive and Copy-Paste the component code in a .tsx file.

npm install @radix-ui/react-separator
import { separator, type SeparatorProps } from "@tailus/themer";
import * as SeparatorPrimitive from "@radix-ui/react-separator";
import React from "react";

interface SeparatorVariantProps extends React.ComponentProps<typeof SeparatorPrimitive.Root>, Pick<SeparatorProps, "fancy" | "dashed"> {}
  
const SeparatorRoot = React.forwardRef<
  React.ElementRef<typeof SeparatorPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root> & SeparatorVariantProps
  >(({ fancy, dashed, className, ...props }, ref) => {
    
  if (fancy && dashed) throw new Error("A separator cannot be both fancy and dashed");

  return (
    <SeparatorPrimitive.Root
      className={separator({fancy, dashed, orientation:props.orientation, className})}
      {...props}
      ref={ref}
    />
  );
});

SeparatorRoot.displayName = "Separator";
export default SeparatorRoot;

Usage

Import the Separator part and start using it in your component.

import Separator from "@tailus-ui/Separator"
const MyComponent = () => (
    <div>
        <p>Some content</p>
        <Separator />
        <p>Some more content</p>
    </div>
)

Reference

Separator

The Separator component has the following props

Prop
Type
Default
dashed
boolean
-
fancy
boolean
-
orientation
enum
"horizontal"

Examples

Default

Tailus UI React
An open-source UI component library.
Blog
Docs
Source
 
import Separator from "@tailus-ui/Separator"

const MyComponent = () => (
    <div className="max-w-sm">
        <Title as="div" size="base" weight="medium">Tailus UI React</Title>
        <Text as="div" size="sm" className="mt-1">An open-source UI component library.</Text>
        <Separator className="my-4"/>
        <div className="flex h-5 gap-4 items-center">
            <Text as="div" size="sm">Blog</Text>
            <Separator decorative orientation="vertical"/>
            <Text as="div" size="sm">Docs</Text>
            <Separator decorative orientation="vertical"/>
            <Text as="div" size="sm">Source</Text>
        </div>
    </div>
)

Dashed

Tailus UI React
An open-source UI component library.
Blog
Docs
Source
 
import Separator from "@tailus-ui/Separator"

const MyComponent = () => (
    <div className="max-w-sm">
        <Title as="div" size="base" weight="medium">Tailus UI React</Title>
        <Text as="div" size="sm" className="mt-1">An open-source UI component library.</Text>
        <Separator dashed className="my-4"/>
        <div className="flex h-5 gap-4 items-center">
            <Text as="div" size="sm">Blog</Text>
            <Separator dashed decorative orientation="vertical"/>
            <Text as="div" size="sm">Docs</Text>
            <Separator dashed decorative orientation="vertical"/>
            <Text as="div" size="sm">Source</Text>
        </div>
    </div>
)

Fancy

Tailus UI React
An open-source UI component library.
Blog
Docs
Source
 
import Separator from "@tailus-ui/Separator"

const MyComponent = () => (
    <div className="max-w-sm">
        <Title as="div" size="base" weight="medium">Tailus UI React</Title>
        <Text as="div" size="sm" className="mt-1">An open-source UI component library.</Text>
        <Separator fancy className="my-4"/>
        <div className="flex h-5 gap-4 items-center">
            <Text as="div" size="sm">Blog</Text>
            <Separator fancy decorative orientation="vertical"/>
            <Text as="div" size="sm">Docs</Text>
            <Separator fancy decorative orientation="vertical"/>
            <Text as="div" size="sm">Source</Text>
        </div>
    </div>
)