Separator

Visually or semantically separates content.

Code

import { Separator } from "@falcon/ui-kit";

export function Example() {
  return (
    <div className="tw:flex tw:max-w-sm tw:flex-col tw:gap-4 tw:text-sm">
      <div className="tw:flex tw:flex-col tw:gap-1.5">
        <div className="tw:leading-none tw:font-medium">Falcon</div>
        <div className="tw:text-muted-foreground">
          The foundation for operational interfaces
        </div>
      </div>
      <Separator />
      <div>
        A set of reusable components for dashboards, catalogs, orders, and admin
        workflows.
      </div>
    </div>
  );
}

Vertical

Use orientation="vertical" for a vertical separator.

Code

import { Separator } from "@falcon/ui-kit";

export function Example() {
  return (
    <div className="tw:flex tw:h-5 tw:items-center tw:gap-4 tw:text-sm">
      <div>Orders</div>
      <Separator orientation="vertical" />
      <div>Invoices</div>
      <Separator orientation="vertical" />
      <div>Customers</div>
    </div>
  );
}

Menu

Vertical separators between menu items with descriptions.

Code

import { Separator } from "@falcon/ui-kit";

export function Example() {
  return (
    <div className="tw:flex tw:items-center tw:gap-2 tw:text-sm tw:md:gap-4">
      <div className="tw:flex tw:flex-col tw:gap-1">
        <span className="tw:font-medium">Settings</span>
        <span className="tw:text-xs tw:text-muted-foreground">
          Manage preferences
        </span>
      </div>
      <Separator orientation="vertical" />
      <div className="tw:flex tw:flex-col tw:gap-1">
        <span className="tw:font-medium">Locations</span>
        <span className="tw:text-xs tw:text-muted-foreground">
          Delivery addresses
        </span>
      </div>
      <Separator orientation="vertical" className="tw:hidden tw:md:block" />
      <div className="tw:hidden tw:flex-col tw:gap-1 tw:md:flex">
        <span className="tw:font-medium">Support</span>
        <span className="tw:text-xs tw:text-muted-foreground">
          Order assistance
        </span>
      </div>
    </div>
  );
}

List

Horizontal separators between list items.

Code

import { Separator } from "@falcon/ui-kit";

export function Example() {
  return (
    <div className="tw:flex tw:w-full tw:max-w-sm tw:flex-col tw:gap-2 tw:text-sm">
      <dl className="tw:flex tw:items-center tw:justify-between">
        <dt>Soybean seed</dt>
        <dd className="tw:text-muted-foreground">24 units</dd>
      </dl>
      <Separator />
      <dl className="tw:flex tw:items-center tw:justify-between">
        <dt>Nitrogen fertilizer</dt>
        <dd className="tw:text-muted-foreground">12 tons</dd>
      </dl>
      <Separator />
      <dl className="tw:flex tw:items-center tw:justify-between">
        <dt>Crop protection</dt>
        <dd className="tw:text-muted-foreground">8 units</dd>
      </dl>
    </div>
  );
}

API

Separator

A separator element accessible to screen readers. Renders a <div> element.

Props

className

className?: string

CSS class applied to the element.

orientation

orientation?: Orientation = "horizontal"

The orientation of the separator. Defaults to "horizontal".

render

render?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SeparatorState>

Allows you to replace the component’s HTML element with a different tag, or compose it with another component. Accepts a React element or a function that returns the element to render.

style

style?: React.CSSProperties | ((state: SeparatorState) => React.CSSProperties | undefined)

Style applied to the element, or a function that returns a style object based on the component’s state.