Data Display@sisyphos-ui/cardView on npm View as Markdown

Preview

example.tsxtsx

Updated 2 hours ago · 24 pages

Ready

Summary of platform events and metrics for the past 30 days, with comparisons to the previous period and a breakdown by team.

Installation

Install the individual package:

$ pnpm add @sisyphos-ui/card @sisyphos-ui/core

Or use the umbrella package that bundles everything:

$ pnpm add @sisyphos-ui/ui

Import the component styles and the component itself:

snippet.tsxtsx

import "@sisyphos-ui/card/styles.css";
import { Card } from "@sisyphos-ui/card";

`elevated` (shadow), `outlined` (border), and `filled` (solid background).

example.tsxtsx

variant="elevated"

variant="outlined"

variant="filled"

`interactive` promotes the card to a button role with focus/hover states.

example.tsxtsx

12 members · 43 projects · owner

3 members · 8 projects · member

`padding` tunes inner spacing — useful for dense grids.

example.tsxtsx

padding="none"

padding="sm"

padding="md"

padding="lg"

Props table is being written. See the package README for the complete API surface.

The full API including refs, ARIA attributes, and HTML passthroughs lives in the package README.