81 Pro components and page blocks

Get Pro
uibrik

Tethered Cards

Pro

Preview

Customize

Auto
Slack1.15
Gravity1.0
Stiffness0.50
Tension1.0
Rope width1.50px
Radius16px

Installation

Pro

Tethered Cards is a Pro component

Sign in to see the source, or install it with a license key. The live preview and props above are free to explore.

Sign inGet Pro

Install with a key

  1. Add the Pro registry to components.json:
    components.json
    {
  "registries": {
    "@uibrik-pro": {
      "url": "https://uibrik.com/r/pro/{name}.json",
      "headers": { "Authorization": "Bearer ${UIBRIK_LICENSE}" }
    }
  }
}
  2. Put your key in .env.local and add that file to .gitignore:
    .env.local
    UIBRIK_LICENSE=your-license-key
  3. Install it:
    Terminal
    npx shadcn@latest add @uibrik-pro/tethered-cards

Usage

import { TetheredCards } from "@/components/uibrik/tethered-cards/tethered-cards";​<TetheredCards  layout="auto"  slack={1.15}  gravity={1}  stiffness={0.5}  tension={1}  ropeWidth={1.5}  radius={16}  // items={[{ id: "…", title: "…" }]}/>

Props

TetheredCards
layout
Type "auto" | "row" | "zigzag"
"auto"
A row when it fits and a zigzag of two staggered columns when it doesn't, or always one of them.
slack
Type number
1.15
Rope length as a share of the gap it spans. Above 1 the ropes sag.
gravity
Type number
1
How strongly the ropes sag and swing.
stiffness
Type number
0.5
How quickly cards drift back to their places.
tension
Type number
1
How hard a taut rope pulls on the next card.
ropeWidth
Type number
1.5
Rope thickness.
radius
Type number
16
Corner radius of a card.
items
Type { id: string; title: string; description?: string; icon?: ReactNode }[]
SAMPLE_CARDS
Cards in order, tied end to end.
className
Type string
–
Classes for the wrapper.