Data Display·Available inReact Vue Angular·View as Markdown

Preview

example.tsxtsx

Render a visual preview of the component here.

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 { useState } from "react";
import { Tabs } from "@sisyphos-ui/react";

export const Settings = () => {
  const [tab, setTab] = useState("profile");
  return (
    <Tabs value={tab} onValueChange={setTab}>
      <Tabs.List>
        <Tabs.Trigger value="profile">Profile</Tabs.Trigger>
        <Tabs.Trigger value="billing">Billing</Tabs.Trigger>
      </Tabs.List>
      <Tabs.Panel value="profile">Profile content.</Tabs.Panel>
      <Tabs.Panel value="billing">Billing content.</Tabs.Panel>
    </Tabs>
  );
};

Pill variant

example.tsxtsx

Dashboard overview…

Vertical orientation

Arrow keys walk Up/Down; Home/End jump to first/last.

example.tsxtsx

Manage your display name, avatar, and public handle.

Full width

`fullWidth` stretches triggers evenly — pairs well with the `soft` variant.

example.tsxtsx

Today's metrics — good for active monitoring.

With icons

Each `Tabs.Trigger` accepts an `icon` prop rendered before the label.

example.tsxtsx

Invite, remove, and manage member roles.

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 →