UI32
47 Accordion48 Alerts49 Avatar50 Badge51 Breadcrumb52 Button53 Button Group54 Calendar55 Card56 Checkbox57 Collapsible58 Combobox59 Data Table60 Date Picker61 Dialog62 Dropdown Menu63 Form64 Input65 Input Mask66 Input OTP67 Pagination68 Popover69 Radio Group70 Select71 Sheet72 Slider73 Sonner74 Switch75 Table76 Tabs77 Textarea78 Tooltip
Charts1
01 Animated radial chart
Interactive3
02 Message dock03 Voice powered orb07 Draggable rope
AI1
13 AI voice input
Galleries3
04 Ruler carousel10 Portfolio gallery32 Hover image gallery
Heroes1
05 Video scroll hero
Shaders2
80 Aurora veil88 Kinetic dots
Tables5
06 Financial table43 Contacts table44 Leads table45 Resizable table46 Server management
Cards15
11 Video upload card16 Animated card options17 Animated card status list18 Audio upload card19 Bonuses incentives card20 Coach scheduling21 Dashboard card modal22 Event countdown card23 Hover detail card24 News cards25 Onboarding stages26 Prediction market card27 Product reveal card28 Profile hover card29 Project cards
Badges1
14 Animated status badge
Buttons1
15 Animated download
Controls1
31 Gradient selector
HUD7
09 HUD frame34 Glitchy 40435 Overlay 236 HUD button37 HUD graph38 HUD status40 Warning graphic
Text1
33 Reveal text
Components•Card
Components•Card

Card

A composable content surface for grouping headers, metrics, media, and actions.

Dependencies

Motionclass-variance-authorityclsxtailwind-merge

Copy below cli

npx shadcn add @bjork-ui/primitive-card

How to use

import { BjorkCard, BjorkCardHeader, BjorkCardTitle } from "@/components/bjork-ui/primitives";export function Demo() {  return (    <BjorkCard>      <BjorkCardHeader>        <BjorkCardTitle>Archive pulse</BjorkCardTitle>        <BjorkBadge variant="accent">Live</BjorkBadge>      </BjorkCardHeader>      <BjorkCardContent>42 copied components this week.</BjorkCardContent>    </BjorkCard>  );}

Props

variantsurface | elevated | quiet | interactive

Controls depth and hover behavior. Interactive adds pointer treatment and motion.

paddingnone | sm | md | lg

Keeps repeated cards aligned without custom wrapper spacing.

roleHTML role

Set role='button' when the full card is clickable so motion and accessibility agree.

slotsHeader | Title | Description | Content | Footer

Use the slots to keep typography, gaps, and action placement consistent.

PreviousCalendarNextCheckbox

Archive pulse

42 copied components this week.

Basic shell

Use the base card when the surface only needs one compact container and soft inset light.

<BjorkCard>  <BjorkCardHeader>    <BjorkCardTitle>Archive pulse</BjorkCardTitle>  </BjorkCardHeader>  <BjorkCardContent>    42 copied components this week.  </BjorkCardContent></BjorkCard>

Archive pulse

Weekly component activity.

Live

Elevated card

Use elevated when a card should sit above nearby surfaces without changing the structure.

<BjorkCard variant="elevated" padding="lg">  <BjorkCardHeader>    <div>      <BjorkCardTitle>Archive pulse</BjorkCardTitle>      <BjorkCardDescription>        Weekly component activity.      </BjorkCardDescription>    </div>    <BjorkBadge variant="accent">Live</BjorkBadge>  </BjorkCardHeader></BjorkCard>

Draft set

Idle
Low-emphasis card treatment for dense stacks.

Quiet card

Use quiet when repeated cards need separation without heavy shadows.

<BjorkCard variant="quiet" padding="sm">  <BjorkCardHeader>    <BjorkCardTitle>Draft set</BjorkCardTitle>    <BjorkBadge variant="muted">Idle</BjorkBadge>  </BjorkCardHeader>  <BjorkCardContent>    Low-emphasis card treatment for dense stacks.  </BjorkCardContent></BjorkCard>

Gallery card

bjork

Interactive card

Use for gallery-style cards. Add role and tabIndex when the whole card acts like a button.

<BjorkCard  variant="interactive"  padding="sm"  role="button"  tabIndex={0}>  <PreviewImage />  <BjorkCardFooter>Open component</BjorkCardFooter></BjorkCard>

Archive pulse

Weekly component activity.

Live
42
Copies
18
Saves
7.4k
Views

Header anatomy

Header, title, description, content, and footer are separate so dense product cards stay aligned.

<BjorkCardHeader>  <div>    <BjorkCardTitle>Archive pulse</BjorkCardTitle>    <BjorkCardDescription>      Weekly component activity.    </BjorkCardDescription>  </div>  <BjorkBadge variant="accent">Live</BjorkBadge></BjorkCardHeader>