Curved board

Pro

A kanban board wrapped on a cylinder. The column you are in faces you; the others curve away at 32 degrees apart, still in sight, so a wide board fits a narrow screen without scrolling sideways. Moving a card also turns the wall to its new column.

Installs components/ui/curved-board.tsxDepends on @radix-ui/react-slot, lucide-reactMotion none in component source

pnpm dlx shadcn@latest add @caliper/curved-board

Backlog2

Doing2

Review1

Done2

Choose a card to move it. Alt with the arrows moves it too.

When to use #

Use it for

Boards with four to six columns that need to fit a laptop or a phone without a sideways scroll.
Review flows where the next and previous stage should always be in sight.

Skip it when

Boards where people compare cards across several columns at once; use the flat board.
Many columns or very dense cards.

Decisions #

Why it is built this way, so you know what to keep when you change your copy.

Behaviour

Only the front column is reachable: Cards in the other columns are inert, so Tab never lands on something that is turned away. Choosing a column from the buttons, the arrows or a swipe brings it round.
Moving a card has buttons and keys: A card is a toggle button. Move to the previous or next column are real buttons, and Alt with the arrows does the same. The result is announced.

Usage

You own the cards: The board reports onMove and you reorder your data. The wall turns to the new column and focus returns to the card.

Installation #

terminal

pnpm dlx shadcn@latest add @caliper/curved-board

Adds its 5 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

Import it from your copy of the source. The example behind the preview comes with the source.

example.tsx

import { CurvedBoard } from "@/components/ui/curved-board"

The worked example comes with Pro

The 38-line example behind the preview opens here with a Pro or Team licence.

Checking your licence…

API reference #

CurvedBoard

component

PropTypeDefaultDescription

label *string—Names the board for screen readers, for example "Release board".

columns *readonly BoardColumn[]—

cards *readonly BoardCard[]—

columnstring—The id of the column facing you. Controlled when set.

defaultColumnstring—

onColumnChange((column: string) => void)—

onMove((cardId: string, toColumn: string) => void)—Called when a card is moved to the previous or next column. Update `cards` in response.

statusDepthStatus"ready"

messagesDepthMessages—

onRetry(() => void)—

disabledboolean—

classNamestring—

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.