Are the ai2 Dotted separators free?

Yes. The whole styled layer is free and MIT licensed, like the component core.

Do they use framer-motion?

Yes. none, every variation is static. The styled layer is opt-in, so the dependency only lands if you use a styled component; the base components ship no motion library.

Do they respect reduced motion?

Yes. Under prefers-reduced-motion, nothing changes, there is no motion to reduce.

Can I change the size?

Yes. Every variation takes a size prop of sm, md, lg or xl, aligned to the base Button height scale.

Dotted separators

Five dividers built from dots instead of a solid rule: an even dot rhythm, a dense dotted line, a row of beads, a widely spaced run and a pair of ends that fade out. Each is sized by dot scale, token-driven and self-contained.

SeparatorDotted

Installation

The styled layer is free and installs like any other ai2 component.

Run the following command

npx shadcn@latest add @ai2/separator-dotted

Dependencies, the @ai2/tokens theme and the component file are installed together.

Copy the source

components/ui/separator-dotted.tsx

"use client"

import type * as React from "react"

import { cn } from "@/lib/utils"

/* Dotted separator family: 5 decorative horizontal separators. The shared idea is the DOT: repeating radial-gradient dots instead of a line (Beads uses real bead spans). Colour comes ONLY from tokens, alpha via color-mix. size grows the dot diameter and spacing (sm..xl). No motion, entirely static and deterministic. */

export type StyledSize = "sm" | "md" | "lg" | "xl"

type Props = React.ComponentProps<"div"> & { size?: StyledSize }

/* Dot: standart nokta cizgisi (orta sikilik). */
const dot: Record<StyledSize, string> = {
  sm: "h-1 [background-image:radial-gradient(circle,var(--color-border)_1px,transparent_1px)] [background-size:6px_6px]",
  md: "h-1.5 [background-image:radial-gradient(circle,var(--color-border)_1.5px,transparent_1.5px)] [background-size:8px_8px]",
  lg: "h-2 [background-image:radial-gradient(circle,var(--color-border)_2px,transparent_2px)] [background-size:10px_10px]",
  xl: "h-2.5 [background-image:radial-gradient(circle,var(--color-border)_2.5px,transparent_2.5px)] [background-size:12px_12px]",
}

/* Dotted: sik ve ince nokta dizisi. */
const dotted: Record<StyledSize, string> = {
  sm: "h-0.5 [background-image:radial-gradient(circle,var(--color-border)_0.5px,transparent_0.5px)] [background-size:3px_3px]",
  md: "h-1 [background-image:radial-gradient(circle,var(--color-border)_1px,transparent_1px)] [background-size:4px_4px]",
  lg: "h-1.5 [background-image:radial-gradient(circle,var(--color-border)_1.5px,transparent_1.5px)] [background-size:5px_5px]",
  xl: "h-2 [background-image:radial-gradient(circle,var(--color-border)_2px,transparent_2px)] [background-size:6px_6px]",
}

/* Spaced: seyrek yerlesimli nokta dizisi. */
const spaced: Record<StyledSize, string> = {
  sm: "h-1 [background-image:radial-gradient(circle,var(--color-border)_1px,transparent_1px)] [background-size:14px_14px]",
  md: "h-1.5 [background-image:radial-gradient(circle,var(--color-border)_1.5px,transparent_1.5px)] [background-size:18px_18px]",
  lg: "h-2 [background-image:radial-gradient(circle,var(--color-border)_2px,transparent_2px)] [background-size:22px_22px]",
  xl: "h-2.5 [background-image:radial-gradient(circle,var(--color-border)_2.5px,transparent_2.5px)] [background-size:26px_26px]",
}

/* Bead diameter: for the necklace row made of real spans. */
const bead: Record<StyledSize, string> = {
  sm: "size-1",
  md: "size-1.5",
  lg: "size-2",
  xl: "size-2.5",
}

const beadGap: Record<StyledSize, string> = {
  sm: "gap-1.5",
  md: "gap-2",
  lg: "gap-2.5",
  xl: "gap-3",
}

/* Sabit bead sayisi: Math.random yok, deterministik. */
const BEAD_COUNT = 12
const beadKeys = Array.from({ length: BEAD_COUNT }, (_, i) => `bead-${i}`)

const patternBase =
  "w-full [background-repeat:repeat-x] [background-position:center]"

/* Dot: esit araliklarla tekrar eden token noktalari. */
export function DotSeparator({ className, size = "md", ...props }: Props) {
  return (
    <div
      data-slot="styled-separator"
      role="separator"
      aria-orientation="horizontal"
      className={cn(patternBase, dot[size], className)}
      {...props}
    />
  )
}

/* Dotted: the classic dotted line look, tight and thin. */
export function DottedSeparator({ className, size = "md", ...props }: Props) {
  return (
    <div
      data-slot="styled-separator"
      role="separator"
      aria-orientation="horizontal"
      className={cn(patternBase, dotted[size], className)}
      {...props}
    />
  )
}

/* Beads: kolye gibi dizilmis, kenarlikli dolu bead'ler. */
export function BeadsSeparator({ className, size = "md", ...props }: Props) {
  return (
    <div
      data-slot="styled-separator"
      role="separator"
      aria-orientation="horizontal"
      className={cn(
        "flex w-full items-center justify-center overflow-hidden",
        beadGap[size],
        className
      )}
      {...props}
    >
      {beadKeys.map((key) => (
        <span
          key={key}
          aria-hidden="true"
          className={cn(
            "shrink-0 rounded-full border border-border bg-secondary",
            bead[size]
          )}
        />
      ))}
    </div>
  )
}

/* Spaced: nefes alan, genis aralikli nokta ritmi. */
export function SpacedSeparator({ className, size = "md", ...props }: Props) {
  return (
    <div
      data-slot="styled-separator"
      role="separator"
      aria-orientation="horizontal"
      className={cn(patternBase, spaced[size], className)}
      {...props}
    />
  )
}

/* FadeDot: iki uctan saydama solan nokta dizisi (token mask). */
export function FadeDotSeparator({ className, size = "md", ...props }: Props) {
  return (
    <div
      data-slot="styled-separator"
      role="separator"
      aria-orientation="horizontal"
      className={cn(
        patternBase,
        dot[size],
        "[mask-image:linear-gradient(to_right,transparent,var(--color-foreground)_25%,var(--color-foreground)_75%,transparent)]",
        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.

Dot

Evenly repeating token dots at a balanced rhythm.

Dotted

A dense, fine dotted line.

Beads

A row of bordered beads strung like a necklace.

Spaced

Widely spaced dots that let the layout breathe.

Fade dot

Dots that fade to transparent at both ends.

ai2 Dotted separators: 5 styled variations on the token system

The ai2 Dotted separators are a set of 5 decorative button variations from the styled layer of the @ai2 design system, built around dividers drawn from repeating dots rather than a solid line. 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 Dotted separators?

5 exports in one file: Dot, Dotted, Beads, Spaced and Fade dot. 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 Dotted 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.