@zedtech/zedkit-ui

Card

Cards with header/title/description/content/footer slots.

Stable@zedtech/zedkit-ui

Wraps: none (presentational, theme tokens only)

Order #1042

Placed 26 October by Camille Rousseau

Item	Qty	Price
Linen shirt	1	€49.00
Canvas tote	2	€48.00
Shipping	1	€4.50
Total €101.50

View props table

Who is it for?: Developers grouping related content in bordered sections.
When should I use it?: For self-contained blocks (panels, summaries, previews).
When should I pick something else?: For page-level layout — use AppShell and Stack instead.

Use it

Examples import from the package. With copied source, import from @/components/ui/card instead.

Simple

import { Card, CardContent, CardDescription, CardHeader, CardTitle, Container } from "@zedtech/zedkit-ui";
<Container query width="full" gutter={false}><Card size="sm"><CardHeader><CardTitle>Server</CardTitle>
<CardDescription>Connection details.</CardDescription></CardHeader>
<CardContent>Body.</CardContent></Card></Container>

With footer

Spring collection

12 products, last edited 2 hours ago

Draft

This page is still a draft. Publishing makes it visible to every customer.

import { Card, CardContent, CardFooter } from "@zedtech/zedkit-ui";
<Card><CardContent>Body.</CardContent>
<CardFooter>Actions go here.</CardFooter></Card>

Kit not installed yet?

You get

Every component from one import, with the theme tokens included. Updates arrive with your package manager.

You need

React 19 and Tailwind CSS 4, for example a Next.js app created with the Tailwind option.

Install

Terminal

pnpm add @zedtech/zedkit-ui @fontsource-variable/inter @fontsource-variable/space-grotesk

Load the styles

Tailwind does not scan node_modules, so the @source line points it at the kit's class names. The path is relative to this file.

src/app/globals.cssReplace the contents

@import "tailwindcss";
@import "@zedtech/zedkit-ui/styles.css";
@source "../../node_modules/@zedtech/zedkit-ui/src/**/*.{ts,tsx}";
@source not "../../node_modules/@zedtech/zedkit-ui/src/**/*.test.*";

Pick a look

Set data-identity="glass" on <html> so the finished app matches the site. Fresh app: replace src/app/layout.tsx. Existing app: merge, and keep ThemeProvider and other providers.

src/app/layout.tsxReplace the contents

import "./globals.css";
import "./fonts";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" data-identity="glass">
      <body>{children}</body>
    </html>
  );
}

4
Load the fonts
The Glass look uses Inter and Space Grotesk; these imports self-host them.
src/app/fonts.tsCreate the file
```
import "@fontsource-variable/inter";
import "@fontsource-variable/space-grotesk";
```

Import and render

src/app/page.tsxReplace the contents

import { Card, CardContent, CardFooter } from "@zedtech/zedkit-ui";

export default function Page() {
  return (
    <main className="px-page-gutter py-section-sm">
      <Card><CardContent>Body.</CardContent>
      <CardFooter>Actions go here.</CardFooter></Card>
    </main>
  );
}

Package version 2.0.1.

Props

Prop

Type

Show inherited HTML attributes

Standard attributes from the underlying element. See MDN.

Prop

Type

Accessibility

Slots are plain containers — put headings and labels inside. Spacing comes from the Card recipe (--zk-card-*); elevation is Surface level 2 (shadow-md, --zk-shadow-md per identity). CardSkeleton takes the same size prop and recipe so loading-to-content substitution does not jump.

Troubleshooting

Cramped content — inner padding comes from the card recipe (`--zk-card-pad`; `trim-pad-top` on content/footer avoids doubling it). Title not announced as a heading — slots are plain `div`s; put a real heading element inside `CardTitle` when the card needs one.

DetailPanel

Key-value details as boxed rows or `variant="grid"` stats, plus a live pulse. Idle copy is `inactiveLabel`; `label` only overrides Live.

EmptyState

Name what is missing and put the next step in `actions`.