Vertical separators
Five dividers that run down instead of across: a solid line, a fading gradient, a dashed rule, a dotted run and a tall glowing rule. Each carries its own height so it renders without a sized parent, and the size axis controls thickness.
Installation
The styled layer is free and installs like any other ai2 component.
Run the following command
npx shadcn@latest add @ai2/separator-verticalDependencies, the @ai2/tokens theme and the component file are installed together.
Copy the source
components/ui/separator-vertical.tsx"use client"
import type * as React from "react"
import { cn } from "@/lib/utils"
/* Vertical separator family: 5 decorative VERTICAL separators. Every export carries its own height, so it renders without props even without a sized parent; when used in a flex row it can be overridden with an h-* class. Colour comes ONLY from tokens, alpha via color-mix. size grows the line THICKNESS (sm..xl). No motion, entirely static and deterministic. */
export type StyledSize = "sm" | "md" | "lg" | "xl"
type Props = React.ComponentProps<"div"> & { size?: StyledSize }
/* Thickness (width) scale for plain lines. */
const width: Record<StyledSize, string> = {
sm: "w-px",
md: "w-0.5",
lg: "w-1",
xl: "w-1.5",
}
/* Dashed vertical line: repeating-linear-gradient running vertically. */
const dashed: Record<StyledSize, string> = {
sm: "w-px [background-image:repeating-linear-gradient(180deg,var(--color-border)_0,var(--color-border)_6px,transparent_6px,transparent_11px)]",
md: "w-0.5 [background-image:repeating-linear-gradient(180deg,var(--color-border)_0,var(--color-border)_8px,transparent_8px,transparent_14px)]",
lg: "w-1 [background-image:repeating-linear-gradient(180deg,var(--color-border)_0,var(--color-border)_10px,transparent_10px,transparent_17px)]",
xl: "w-1.5 [background-image:repeating-linear-gradient(180deg,var(--color-border)_0,var(--color-border)_12px,transparent_12px,transparent_20px)]",
}
/* Dotted vertical line: a vertical radial-gradient repeat. */
const dotted: Record<StyledSize, string> = {
sm: "w-1 [background-image:radial-gradient(circle,var(--color-border)_1px,transparent_1px)] [background-size:6px_6px]",
md: "w-1.5 [background-image:radial-gradient(circle,var(--color-border)_1.5px,transparent_1.5px)] [background-size:8px_8px]",
lg: "w-2 [background-image:radial-gradient(circle,var(--color-border)_2px,transparent_2px)] [background-size:10px_10px]",
xl: "w-2.5 [background-image:radial-gradient(circle,var(--color-border)_2.5px,transparent_2.5px)] [background-size:12px_12px]",
}
/* Default height: a self-sufficient measurement for prop-less rendering. */
const stand = "h-16 shrink-0"
/* LineV: a plain, fully opaque token vertical line. */
export function LineVSeparator({ className, size = "md", ...props }: Props) {
return (
<div
data-slot="styled-separator"
role="separator"
aria-orientation="vertical"
className={cn(stand, "bg-border", width[size], className)}
{...props}
/>
)
}
/* GradientV: a vertical token line fading to transparent at both ends. */
export function GradientVSeparator({ className, size = "md", ...props }: Props) {
return (
<div
data-slot="styled-separator"
role="separator"
aria-orientation="vertical"
className={cn(
stand,
"bg-gradient-to-b from-transparent via-border to-transparent",
width[size],
className
)}
{...props}
/>
)
}
/* DashedV: a dashed vertical token line. */
export function DashedVSeparator({ className, size = "md", ...props }: Props) {
return (
<div
data-slot="styled-separator"
role="separator"
aria-orientation="vertical"
className={cn(
stand,
"[background-repeat:repeat-y] [background-position:center]",
dashed[size],
className
)}
{...props}
/>
)
}
/* DotV: dikey nokta dizisi. */
export function DotVSeparator({ className, size = "md", ...props }: Props) {
return (
<div
data-slot="styled-separator"
role="separator"
aria-orientation="vertical"
className={cn(
stand,
"[background-repeat:repeat-y] [background-position:center]",
dotted[size],
className
)}
{...props}
/>
)
}
/* TallV: a tall vertical line fading from top to bottom with a soft glow. */
export function TallVSeparator({ className, size = "md", ...props }: Props) {
return (
<div
data-slot="styled-separator"
role="separator"
aria-orientation="vertical"
className={cn(
"h-32 shrink-0 rounded-full bg-gradient-to-b from-transparent via-border to-transparent shadow-[0_0_10px_-1px_var(--color-border)]",
width[size],
className
)}
{...props}
/>
)
}Manual installs skip the @ai2/tokens theme, so add the token CSS from the theming guide or the tone colors will be missing.
Variations
5 takes on the same idea. Each is its own export, and every one accepts a size prop (sm, md, lg, xl) aligned to the base Button scale.
Line
A plain, solid vertical token rule.
import { LineVSeparator } from "@/components/ui/separator-vertical"
<LineVSeparator />Gradient
A vertical rule that fades out at both ends.
import { GradientVSeparator } from "@/components/ui/separator-vertical"
<GradientVSeparator />Dashed
A dashed vertical token rule.
import { DashedVSeparator } from "@/components/ui/separator-vertical"
<DashedVSeparator />Dot
A vertical run of token dots.
import { DotVSeparator } from "@/components/ui/separator-vertical"
<DotVSeparator />Tall
A taller fading rule with a soft glow.
import { TallVSeparator } from "@/components/ui/separator-vertical"
<TallVSeparator />ai2 Vertical separators: 5 styled variations on the token system
The ai2 Vertical separators are a set of 5 decorative button variations from the styled layer of the @ai2 design system, built around vertical dividers that bring their own height. They are free and MIT licensed, and every color comes from a semantic token, so they theme with the rest of ai2 in light and dark.
Motion runs on framer-motion: none, every variation is static. The styled layer is opt-in, so the dependency only lands if you use it; the base components stay lean. Under reduced motion, nothing changes, there is no motion to reduce.
What is in the ai2 Vertical separators?
5 exports in one file: Line, Gradient, Dashed, Dot and Tall. Each renders a native button and takes a size prop (sm, md, lg, xl) aligned to the base Button. They are separate from the base Button on purpose: the base keeps its clean variant, tone and size axes, while the styled layer carries the effects.
You own the file. Copy the one category file and you have all 5 variations, with no runtime dependency on ai2 itself.
Why use it
- On-system by construction: Every color resolves to an ai2 semantic token, so the buttons follow your theme in light and dark with no extra work.
- Effect without the sprawl: The decorations live in a dedicated styled file, so the base Button keeps its clean, predictable API.
- Accessible and honest: Each renders a real button element, keeps a visible focus ring, and respects prefers-reduced-motion.
Features
- Token-driven color: No hardcoded hex or oklch; the look recolors with your theme tokens.
- framer-motion: none, every variation is static.
- Reduced-motion aware: Under prefers-reduced-motion, nothing changes, there is no motion to reduce.
- Size aligned to the base: Every variation takes sm, md, lg and xl matching the base Button height scale, so styled and base buttons line up in a row.
Production tips
- Use it for emphasis, not everywhere: Styled buttons draw the eye. Reserve them for the one action you want people to take on a screen, and use the base Button for the rest.
- Keep labels as verbs: The decoration adds weight, so a clear action label keeps the button scannable.
- Pick one variation per surface: The variations share a family; using two different ones in the same view competes for attention.
Works with the rest of ai2
The Vertical separators sit alongside the base Button and the rest of the @ai2 registry. They share the same token file, so a styled action next to a base button or a badge stays visually consistent in both modes.