On this page

Separator

Starwind UI

A beautiful component library for Astro.

Components

Documentation

Examples

    ---
    import { Separator } from "@/components/starwind/separator";
    ---

    <div>
      <h4 class="text-sm font-medium">Starwind UI</h4>
      <p class="text-sm text-muted-foreground">A beautiful component library for Astro.</p>
    </div>
    <Separator />
    <div class="flex h-5 items-center space-x-4 text-sm">
      <div>Components</div>
      <Separator orientation="vertical" />
      <div>Documentation</div>
      <Separator orientation="vertical" />
      <div>Examples</div>
    </div>

import { Separator } from "@/components/starwind/separator";

export function Example() {
  return (
    <>
      <div>
            <h4 className="text-sm font-medium">Starwind UI</h4>
            <p className="text-sm text-muted-foreground">A beautiful component library for Astro.</p>
          </div>
          <Separator />
          <div className="flex h-5 items-center space-x-4 text-sm">
            <div>Components</div>
            <Separator orientation="vertical" />
            <div>Documentation</div>
            <Separator orientation="vertical" />
            <div>Examples</div>
          </div>
    </>
  );
}

Installation

pnpx starwind@latest add separator

npx starwind@latest add separator

yarn dlx starwind@latest add separator

Framework Availability

Astro Available React Available

Separator is available for Astro and React.

Usage

Horizontal (Default)

Horizontal Separator

This is the default orientation.

Content Below

The separator divides content vertically.

---
import { Separator } from "@/components/starwind/separator";
---

<div class="space-y-1">
  <h4 class="text-sm font-medium leading-none">Horizontal Separator</h4>
  <p class="text-sm text-muted-foreground">This is the default orientation.</p>
</div>
<Separator />
<div class="space-y-1">
  <h4 class="text-sm font-medium leading-none">Content Below</h4>
  <p class="text-sm text-muted-foreground">The separator divides content vertically.</p>
</div>

Vertical

Left Content

Middle Content

Right Content

---
import { Separator } from "@/components/starwind/separator";
---

<div class="flex h-20 items-center space-x-4">
  <div class="text-sm">Left Content</div>
  <Separator orientation="vertical" />
  <div class="text-sm">Middle Content</div>
  <Separator orientation="vertical" />
  <div class="text-sm">Right Content</div>
</div>

Custom Styling

Default border color

Custom color and thickness

Dashed style

---
import { Separator } from "@/components/starwind/separator";
---

<div>
  <p class="text-sm">Default border color</p>
</div>
<Separator />

<div>
  <p class="text-sm">Custom color and thickness</p>
</div>
<Separator class="bg-primary h-[2px]" />

<div>
  <p class="text-sm">Dashed style</p>
</div>
<Separator class="bg-transparent border-t border-dashed border-border" />

API Reference

Styled Component API

These props are added or materially changed by the installed Astro styled component. Standard HTML attributes remain available through the inherited interfaces noted below. Follow the Primitive and Runtime links for lower-level behavior props.

Separator

Inherits div attributes. Omits `aria-orientation` and `role`.

Contains the following additional props:

Prop Type Default

orientation "horizontal" | "vertical" "horizontal"

Description: Selects the horizontal or vertical layout direction.
Classification: Styled variant

Changelog

v1.1.0

Added contract-generated Astro and React implementations while preserving the component’s existing public API and styling.

v1.0.2

Refactor tailwind variants functions into separate variants.ts file

v1.0.0

Initial release with starwind v1.10.0