From a662fcb5b1623e8a77d943f8ab890551d22e2ea5 Mon Sep 17 00:00:00 2001
From: grugbraindev <178141691+grugbraindev@users.noreply.github.com>
Date: Fri, 23 Oct 2026 09:32:40 +0800
Subject: [PATCH] Document the separator
Basecoat has no Separator component: an already renders as a 1px line in the border color. Add a docs page with horizontal, vertical, menu, list and RTL examples that mirror shadcn/ui's Separator docs.
---
site/src/docs/components/separator.mdx | 127 +++++++++++++++++++++++++
site/src/docs/docs.json | 1 +
2 files changed, 128 insertions(+)
create mode 100644 site/src/docs/components/separator.mdx
diff --git a/site/src/docs/components/separator.mdx b/site/src/docs/components/separator.mdx
new file mode 100644
index 0000000..1183a97
--- /dev/null
+++ b/site/src/docs/components/separator.mdx
@@ -0,0 +1,127 @@
+# Separator
+
+
+ There is no dedicated Separator component in Basecoat.
+
+
+
+
+
+
Basecoat
+
Tailwind components for any web stack
+
+
+
A set of components you can drop into any HTML page, styled like shadcn/ui.
+
+
+
+## Usage
+
+
+
+
+Import Tailwind and one full Basecoat style bundle.
+
+```css
+@import "tailwindcss";
+@import "basecoat-css/vega.css";
+```
+
+Or import only the base CSS, which sets the border color.
+
+```css
+@import "tailwindcss";
+@import "basecoat-css/base.css";
+```
+
+Separator is a native `` plus Tailwind utilities and has no dedicated component CSS file.
+
+Using CDN or bundler imports? See the [Installation page](/installation).
+
+
+
+
+Use an ``. Tailwind's preflight and Basecoat's base CSS render it as a 1px line in the `border` color, matching shadcn/ui's Separator.
+
+```html
+
+```
+
+
+
+
+## Examples
+
+### Vertical
+
+Add `aria-orientation="vertical"` and swap the top border for an inline-start border. `self-stretch` makes it fill the height of a flex row.
+
+
+
+
Blog
+
+
Docs
+
+
Source
+
+
+
+### Menu
+
+Vertical separators between menu items with descriptions.
+
+
+
+
+ Settings
+ Manage preferences
+
+
+
+ Account
+ Profile & security
+
+
+
+ Help
+ Support & docs
+
+
+
+
+### List
+
+Horizontal separators between list items.
+
+
+
+
+
Item 1
+
Value 1
+
+
+
+
Item 2
+
Value 2
+
+
+
+
Item 3
+
Value 3
+
+
+
+
+### RTL
+
+The vertical separator uses the logical `border-s` utility, so it needs no changes for right-to-left layouts.
+
+
+