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

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 on npm.

Need more?View on npm →