Skip to content
GaudiGaudi Design System home

Search documentation

Search every page, heading and paragraph.

Sortable

Reorder lists and grids with drag handles, keyboard controls and cancellation.

CoreLayout & Containers@gaudi/design-system/core/SortableView in StorybookSource

Installation

pnpm add github:ahmadassaf/design-system

Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.

import { Sortable } from '@gaudi/design-system/core/Sortable';

Copy an example into your project with the shadcn CLI: npx shadcn@latest add https://design.gaudi.site/r/sortable-media-grid.json.

Usage

import { Sortable, SortableItem, SortableItemHandle } from '@gaudi/design-system/core/Sortable';
<Sortable value={ids} onValueChange={setIds}>  {ids.map(id => <SortableItem key={id} value={id}>    <SortableItemHandle aria-label={`Reorder ${labels[id]}`} />    {labels[id]}  </SortableItem>)}</Sortable>

Examples

Media grid

Storybook

Nested lists

Storybook

Persisted order

Storybook

List with row controls

Storybook

API

11 props

Accessibility

Keep a keyboard-operable handle and announce moves. The application owns saving and restoring the last committed order.

CardCard frames reusable content with title, subtitle, and optional children.8 examplesPillPill renders compact category and status labels.4 examplesToastTransient feedback for completed actions, errors and recoverable background work.4 examplesSwitchSwitch renders a token-styled boolean preference control.4 examplesFieldField composes form label, description, error, and input building blocks.7 examplesuseTimeoutA one-off timer with reset and clear.