Alignment controls
Align and distribute selected elements – left, centre, right, top, middle, bottom.
Install
npx shadcn@latest add https://substrate.georgedrury.co.uk/r/alignment-controlsExamples
Default
The first row shows all controls including distribute. The second row hides distribute with showDistribute={false}.
"use client"
import { AlignmentControls, type AlignAction } from "@/components/substrate/alignment-controls"Props
| Prop | Type | Default | Description |
|---|---|---|---|
onAlign | (action: AlignAction) => void | — | Called with the alignment action |
showDistribute | boolean | true | Show distribute horizontal/vertical |
disabled | boolean | — | Disables all buttons |
AlignAction values
left · center-h · right · top · center-v · bottom · distribute-h · distribute-v