81 Pro components and page blocks

Get Pro
uibrik

Unbox Card

Pro

Preview

Customize

Hover
Color
Turn-16°
Spread140°
Stagger0.05s

Installation

Pro

Unbox Card 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/unbox-card

Usage

import { UnboxCard } from "@/components/uibrik/unbox-card/unbox-card";​const items = [  { name: "Instagram", icon: <Instagram /> },  { name: "Facebook", icon: <Facebook /> },  // …4 more];​<UnboxCard  trigger="hover"  color="#c69c6d"  tape  turn={-16}  spread={140}  stagger={0.05}  tilt  items={items}  title="Share everywhere"  description="One post, sent to every channel at once."  defaultOpen={false}  onOpenChange={(open) => {}}  onSelect={(item) => {}}  // content={<…/>}  // open={false}/>

Props

UnboxCard
trigger
Type "hover" | "click"
"hover"
Open while pointed at (tap on touch), or on click.
color
Type string
"#c69c6d"
Cardboard colour. Walls, flaps and the inside are shaded from it.
tape
Type boolean
true
Packing tape along the seam, split when the box opens.
turn
Type number
-16
How far the box is turned. Positive shows its left side.
spread
Type number
140
How wide the icon arc spans.
stagger
Type number
0.05
Time between icons popping out.
tilt
Type boolean
true
Lean the box toward the pointer.
items
Type { name: string; icon: ReactNode }[]
6 social channels
Icons that pop out of the box, in order along the arc.
content
Type ReactNode
<Post />
What rises out of the middle of the box. About 104 × 72 px.
title
Type string
"Share everywhere"
Heading under the box. Empty hides it.
description
Type string
"One post, sent to every channel at once."
Line under the title.
open
Type boolean
–
Controlled open state.
defaultOpen
Type boolean
false
Open state on mount, when uncontrolled.
onOpenChange
Type (open: boolean) => void
–
Called when the box opens or closes.
onSelect
Type (item) => void
–
Called when an icon is clicked.
className
Type string
–
Classes for the card.