UI Lab

    DnD variants

    Live preview of every drag-and-drop interaction, each on its own page. All demos are built on the in-house pointer DnD library at @/components/ui/dnd — no @dnd-kit, no react-beautiful-dnd.

    Sortable list
    Write product spec
    Design system audit
    Refactor DnD primitives
    Ship release notes
    Sync with design

    Drag any row to reorder. Cards shift to make room at the drop position.

    Horizontal pill reorder
    TypeScript
    React
    Vite
    Tailwind
    Vitest
    Bun
    Multi-list transfer

    Available (4)

    Alice Chen
    Marcus Lee
    Priya Patel
    Diego Ruiz

    Selected (1)

    Hana Suzuki
    Image grid sort
    #1
    #2
    #3
    #4
    #5
    #6
    #7
    #8
    Trash zone
    Item 1
    Item 2
    Item 3
    Item 4
    Item 5
    Item 6
    Drop here to delete0 removed
    Priority buckets
    Low
    Update docs
    Add tests
    Medium
    Fix login bug
    Refactor parser
    High
    Investigate outage
    Nested tree reorder
    Frontend
    Components
    Hooks
    Pages
    Backend
    Routes
    Services
    File → folder drop

    Loose files

    report.pdf
    notes.md
    logo.svg
    data.csv
    Documents0 files
    Designs0 files
    Archive0 files
    Table row reorder

    Company Type

    Company field configuration

    Key
    Display Value
    Status
    Type
    Position
    Usage
    Actions
    owner
    OWNER
    System Default
    01
    3pl
    3PL
    System Default
    02
    both
    BOTH
    System Default
    03
    vendor
    VENDOR
    Custom
    04