Card

Soft, semantic Card anatomy plus reusable content compositions. Surface, radius and consumer className overrides stay independent.

Import

import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/atoms/card";

Surface variants

default

Semantic surface and elevation treatment.

soft

Semantic surface and elevation treatment.

outline

Semantic surface and elevation treatment.

glass

Semantic surface and elevation treatment.

elevated

Semantic surface and elevation treatment.

interactive

Semantic surface and elevation treatment.

<Card variant="default" />
<Card variant="soft" />
<Card variant="outline" />
<Card variant="glass" />
<Card variant="elevated" />
<Card variant="interactive" />

Basic and image cards

Workspace activity

A standard content card with a compact action.

12 members collaborated this week.

Poyraz UI mark
Design guide

Building a soft glass system

Composable surfaces, semantic tokens and accessible states.

<BasicContentCard title="Workspace" description="..." action={<Button />} />
<ImageContentCard src="..." title="Design systems" category="Guide" />

Horizontal and profile cards

Poyraz UI
Architecture

Registry-first UI

Copy the source, own the component and customize every layer.

Poyraz Avsever

Product Designer

Designing flexible interfaces with a clear visual voice.

<HorizontalCard ... />
<ProfileCard ... />

Statistic and feature cards

Total revenue

$56,000
↑ 12.5% from last month

Registry-first

Install source directly into your project and keep full ownership.

Soft glass

Semantic transparency, fallback and reduced-transparency support.

<StatisticCard label="Revenue" value="$56,000" change="+12.5%" chart={chart} />
<FeatureCard icon={<Zap />} title="Fast" description="..." />

Pricing card

Pro

For teams building polished products.

Popular
$19/month
  • Unlimited projects
  • Advanced analytics
  • Priority support
<PricingPlanCard name="Pro" price="$19" period="month" features={[...]} action={<Button />} popular />

Glass and interactive cards

Glass surface

Blur, translucent border and soft inset highlight.

Hover for actions

Actions also appear with keyboard focus.

<GlassCard>...</GlassCard>
<InteractiveCard actions={<Button />}>...</InteractiveCard>

Expandable card

Release notes

A controlled or uncontrolled disclosure composition.

<ExpandableCard summary="Release notes">Full details...</ExpandableCard>

CardAction anatomy

Team plan

CardAction occupies the stable top-right anatomy slot.

Nested cards use a smaller radius than their parent.
<CardHeader>
  <CardTitle>Title</CardTitle>
  <CardDescription>Description</CardDescription>
  <CardAction><Button /></CardAction>
</CardHeader>
pnpm dlx shadcn@latest add @poyraz/card

Runtime dependencies

class-variance-authority@^0.7.1

Registry dependencies

@poyraz/poyraz-utils, @poyraz/poyraz-theme

Installed files

@ui/atoms/card.tsx