# Shadcn UI Separator

> Visually separate content with ShadSeparator.horizontal and ShadSeparator.vertical; thickness, margin, radius. Use when adding dividers or visual separation in a Flutter shadcn_ui app.

- Skill: `serverpod/shadcn-ui-separator` (Agent Skill)
- Install (CLI): `npx skillmds@latest add serverpod/shadcn-ui-separator`
- Raw SKILL.md: https://api.skillmd.com/api/skills/serverpod/shadcn-ui-separator/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: serverpod (https://skillmd.com/u/serverpod)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/serverpod/shadcn-ui-separator

---


# Shadcn UI — Separator

## Instructions

`ShadSeparator` visually or semantically separates content. Use `ShadSeparator.horizontal` for a horizontal line (e.g. between rows); use `ShadSeparator.vertical` for a vertical line (e.g. between columns). Optional: `thickness`, `margin`, `radius`, `color`.

### Horizontal

```dart
const ShadSeparator.horizontal(
  thickness: 4,
  margin: EdgeInsets.symmetric(horizontal: 20),
  radius: BorderRadius.all(Radius.circular(4)),
)
```

### Vertical

```dart
const ShadSeparator.vertical(
  thickness: 4,
  margin: EdgeInsets.symmetric(vertical: 20),
  radius: BorderRadius.all(Radius.circular(4)),
)
```