Data Display·Available inReact Vue Angular·View as Markdown

Preview

example.tsxtsx

Monthly report

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.

Switch the framework picker (top-right of the panel) to render the same demo live in React, Vue, or Angular — same class names, ARIA, and visual output across all three.

Installation

Sisyphos UI ships unified packages for React, Vue, and Angular. Pick the one that matches your stack — every framework exports the same component classes, ARIA semantics, and CSS tokens.

$ pnpm add @sisyphos-ui/react

Then import the bundled stylesheet once at app entry: import "@sisyphos-ui/react/styles.css";

Usage

Idiomatic usage in each supported framework

example.tsx

import { Card } from "@sisyphos-ui/react";

export const Profile = () => (
  <Card>
    <Card.Header>Profile</Card.Header>
    <Card.Body>Welcome back, Volkan.</Card.Body>
    <Card.Footer>Updated 5 minutes ago</Card.Footer>
  </Card>
);

Variants

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

example.tsxtsx

elevated

variant="elevated"

outlined

variant="outlined"

filled

variant="filled"

Interactive

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

example.tsxtsx

Acme Inc.

12 members · 43 projects · owner

Side projects

3 members · 8 projects · member

Padding

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

example.tsxtsx

padding="none"

padding="sm"

padding="md"

padding="lg"

API

Prop	Type	Default	Description
variant	"elevated" \| "outlined" \| "filled"	"elevated"	Surface treatment.
padding	"none" \| "sm" \| "md" \| "lg"	"md"	Body padding when the compound slots (`Card.Header` / `Card.Body` / `Card.Footer`) are not used.
interactive	boolean	false	Marks the whole card as focusable and clickable (`role="button"`, `tabIndex={0}`).

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

Accessibility

interactive makes the whole card focusable (tabIndex={0}) and exposes role="button".
Card.Header and Card.Footer render semantic <header> / <footer> elements.
Non-interactive cards add no roles — content keeps its own semantics.

Keyboard interactions

Key	Action
`Tab`	Focuses an `interactive` card; non-interactive cards are skipped.

Need more?View on npm →