# Sisyphos UI > Open-source design system for React, Vue 3, and Angular 18. 33 accessible components with runtime theming via applyTheme(). MIT licensed. Docs base: https://www.sisyphosui.com/docs Component docs base: https://www.sisyphosui.com/docs/components/ Markdown export for any component: https://www.sisyphosui.com/docs/components//md Blocks gallery: https://www.sisyphosui.com/blocks Templates gallery: https://www.sisyphosui.com/templates Anatomy (system overview): https://www.sisyphosui.com/anatomy Skills (AI agent integration): https://www.sisyphosui.com/skills MCP server (Streamable HTTP): https://www.sisyphosui.com/api/mcp MCP setup guide: https://www.sisyphosui.com/docs/mcp Changelog: https://www.sisyphosui.com/docs/changelog Changelog RSS: https://www.sisyphosui.com/changelog.xml ## Guides - [Introduction](https://www.sisyphosui.com/docs) - [Installation](https://www.sisyphosui.com/docs/installation) - [Theming](https://www.sisyphosui.com/docs/theming) - [Accessibility](https://www.sisyphosui.com/docs/accessibility) - [Anatomy — system overview](https://www.sisyphosui.com/anatomy) - [MCP Server](https://www.sisyphosui.com/docs/mcp) - [Skills](https://www.sisyphosui.com/skills) - [Changelog](https://www.sisyphosui.com/docs/changelog) ## Blocks Copy-paste UI sections composed from Sisyphos UI components. Browse the gallery at https://www.sisyphosui.com/blocks. ### Marketing - [Marketing hero](https://www.sisyphosui.com/blocks/hero-marketing) — Centered marketing hero with an eyebrow chip, dual-tone gradient headline, supporting paragraph, and a paired primary + outlined CTA row. (uses: Button, Chip) - [Feature grid](https://www.sisyphosui.com/blocks/feature-grid) — Three-up feature card grid. Each card carries an icon medallion, a tight title, and a one-line value-prop description. (uses: Card) - [Pricing tiers](https://www.sisyphosui.com/blocks/pricing-tier) — Three-tier pricing table with a highlighted middle plan. Card variants drive the visual emphasis, Chip badges the popular tier. (uses: Card, Chip, Button) - [Testimonials](https://www.sisyphosui.com/blocks/testimonial-card) — Two-up customer testimonial cards with star rating, opening quote glyph, and an Avatar-led author footer. (uses: Card, Avatar) - [CTA banner](https://www.sisyphosui.com/blocks/cta-banner) — Full-width dark CTA section with a brand-tinted halo, dual-tone headline, a primary + ghost button pair, and a closing trust strip. (uses: Button) - [Trusted-by logo cloud](https://www.sisyphosui.com/blocks/logo-cloud) — Horizontal customer-logo strip with a small eyebrow label. Sits between Hero and Feature grid to anchor social proof early. (uses: ) - [FAQ accordion](https://www.sisyphosui.com/blocks/faq-accordion) — Five-question FAQ list using the Sisyphos Accordion (single-open mode). Sits between testimonials and the closing CTA on a marketing landing. (uses: Accordion) - [Newsletter signup](https://www.sisyphosui.com/blocks/newsletter-signup) — Inline email-capture: Sisyphos Input + Button submit, with a one-line privacy/frequency footnote. Drops in anywhere a single-field signup makes sense. (uses: Input, Button) ### Authentication - [Sign-in card](https://www.sisyphosui.com/blocks/auth-sign-in) — Centered card with email + password inputs, a primary submit, and links to forgotten-password and sign-up flows. (uses: Card, Input, Button, FormControl) ### Application - [Stats row](https://www.sisyphosui.com/blocks/stats-row) — Four-tile KPI row for dashboards. Each tile pairs a big metric with a trend chip and a one-line period-over-period context. (uses: Card, Chip) - [Empty state panel](https://www.sisyphosui.com/blocks/empty-state) — Card-wrapped empty panel using the Sisyphos EmptyState primitive — icon, title, description, paired action buttons. Drops into any list / table / collection view that hasn't been populated yet. (uses: Card, EmptyState, Button) ### Forms - [Contact form](https://www.sisyphosui.com/blocks/contact-form) — Two-column contact section: intro panel (eyebrow + headline + email link) and a Card-wrapped form (Input + Textarea + Button). Submits to a toast for demo purposes. (uses: Card, Input, Textarea, Button) ### Navigation - [Site footer](https://www.sisyphosui.com/blocks/site-footer) — Four-column footer (brand Avatar + Product / Resources / Company link columns) with a copyright + social Button row. Closes every marketing template. (uses: Avatar, Button) ## Templates Full-page layouts built from Blocks. Browse the gallery at https://www.sisyphosui.com/templates. ### Marketing - [Marketing landing](https://www.sisyphosui.com/templates/marketing-landing) — Full home page: announcement bar, primary nav, hero, logo cloud, feature grid, pricing tiers, testimonials, closing CTA, and footer. Drops in as `app/page.tsx`. (blocks: hero-marketing, logo-cloud, feature-grid, pricing-tier, testimonial-card, cta-banner, site-footer) - [Pricing page](https://www.sisyphosui.com/templates/pricing-page) — Focused /pricing route: announcement, primary nav, hero, three pricing tiers, closing CTA, and footer. The narrowest path from arrival to conversion. (blocks: hero-marketing, pricing-tier, cta-banner, site-footer) - [Contact page](https://www.sisyphosui.com/templates/contact-page) — Drop-in /contact route — announcement bar, primary nav, contact hero, the contact form, FAQ accordion, and footer. Catches pre-sales and support traffic in one place. (blocks: contact-form, faq-accordion, site-footer) ### Application - [Dashboard overview](https://www.sisyphosui.com/templates/dashboard-overview) — Logged-in landing — sticky app header (workspace switcher, search, profile Avatar), collapsible sidebar nav, a KPI stats row, and an empty-state panel for first-run users. (blocks: stats-row, empty-state) ### Authentication - [Authentication page](https://www.sisyphosui.com/templates/auth) — Full-screen split layout: brand panel on the left, centered sign-in card on the right. Composes the auth-sign-in block. (blocks: auth-sign-in) ## Releases - [v1.0.0](https://www.sisyphosui.com/docs/changelog#1.0.0) — 2026-05-04 · Multi-framework v1 — React, Vue, and Angular ship from one design system - [v0.5.0](https://www.sisyphosui.com/docs/changelog#0.5.0) — 2026-05-02 · Table truncation, mask caret lock, default times, real tristate - [v0.4.0](https://www.sisyphosui.com/docs/changelog#0.4.0) — 2026-04-24 · Kbd, Command, ContextMenu — and a Firefox spinner fix - [v0.3.0](https://www.sisyphosui.com/docs/changelog#0.3.0) — 2026-04-18 · Input masks, data-grid Table, submenus - [v0.2.0](https://www.sisyphosui.com/docs/changelog#0.2.0) — 2026-04-16 · Initial public release ## Forms & Inputs - [Button](https://www.sisyphosui.com/docs/components/button/md) — Polymorphic, accessible button with four variants, five sizes, loading state, optional dropdown, and href support. (package: `@sisyphos-ui/react`) - [Input](https://www.sisyphosui.com/docs/components/input/md) — Text input with three variants, label tooltips, validation state, password toggle, copy-to-clipboard, character count, and a built-in formatting mask that locks the caret past fixed prefixes. (package: `@sisyphos-ui/react`) - [Textarea](https://www.sisyphosui.com/docs/components/textarea/md) — Multiline text input with auto-resize, character count, and all Input features. (package: `@sisyphos-ui/react`) - [Checkbox](https://www.sisyphosui.com/docs/components/checkbox/md) — Binary input with full tristate support (checked / unchecked / indeterminate), label association, semantic colors, and keyboard activation. (package: `@sisyphos-ui/react`) - [Switch](https://www.sisyphosui.com/docs/components/switch/md) — Toggle input for binary settings with on/off states and smooth transitions. (package: `@sisyphos-ui/react`) - [Radio](https://www.sisyphosui.com/docs/components/radio/md) — Single-choice picker with `RadioGroup` compound API and roving tabindex. (package: `@sisyphos-ui/react`) - [Select](https://www.sisyphosui.com/docs/components/select/md) — Dropdown picker with search, multi-select, virtualization-ready items, and full keyboard nav. (package: `@sisyphos-ui/react`) - [Tree Select](https://www.sisyphosui.com/docs/components/tree-select/md) — Hierarchical multi-select with checkbox cascading, mixed (partial) parent state, recursive search that auto-expands matched ancestors, and tag overflow. (package: `@sisyphos-ui/react`) - [Number Input](https://www.sisyphosui.com/docs/components/number-input/md) — Numeric input with stepper buttons, min/max clamping, precision, prefix/suffix slots, and locale-aware formatting via `Intl.NumberFormat`. (package: `@sisyphos-ui/react`) - [Slider](https://www.sisyphosui.com/docs/components/slider/md) — Range selector with single or dual thumbs, step snapping, marks, and keyboard arrow support. (package: `@sisyphos-ui/react`) - [DatePicker](https://www.sisyphosui.com/docs/components/datepicker/md) — Calendar-driven date picker with single or range mode, day / month / year views, optional time picker with configurable defaults, min/max constraints, and Turkish or English locales. (package: `@sisyphos-ui/react`) - [File Upload](https://www.sisyphosui.com/docs/components/file-upload/md) — Drag-and-drop file picker with `accept` / `maxSize` / `maxFiles` validation, per-file progress and status, optional folder upload, and an async-cancellable remove hook. (package: `@sisyphos-ui/react`) ## Data Display - [Chip](https://www.sisyphosui.com/docs/components/chip/md) — Compact element for tags, filters, and small actions. Supports icons, removable state, and color tokens. (package: `@sisyphos-ui/react`) - [Avatar](https://www.sisyphosui.com/docs/components/avatar/md) — User representation with image, initials fallback, grouping, and status indicator. (package: `@sisyphos-ui/react`) - [Spinner](https://www.sisyphosui.com/docs/components/spinner/md) — Loading indicator. Respects `prefers-reduced-motion`. (package: `@sisyphos-ui/react`) - [Skeleton](https://www.sisyphosui.com/docs/components/skeleton/md) — Loading placeholder matching content layout. Shimmer animation with reduced-motion support. (package: `@sisyphos-ui/react`) - [Empty State](https://www.sisyphosui.com/docs/components/empty-state/md) — Standardized empty result UI with illustration slot, title, description, and action. (package: `@sisyphos-ui/react`) - [Alert](https://www.sisyphosui.com/docs/components/alert/md) — Inline message with semantic colors, title, description, and dismiss action. (package: `@sisyphos-ui/react`) - [Breadcrumb](https://www.sisyphosui.com/docs/components/breadcrumb/md) — Hierarchical navigation trail with custom separators and truncation. (package: `@sisyphos-ui/react`) - [Card](https://www.sisyphosui.com/docs/components/card/md) — Compound surface with header, body, footer slots. Elevated, outlined, and flat variants. (package: `@sisyphos-ui/react`) - [Accordion](https://www.sisyphosui.com/docs/components/accordion/md) — Collapsible panels with single or multiple expansion modes and full keyboard support. (package: `@sisyphos-ui/react`) - [Tabs](https://www.sisyphosui.com/docs/components/tabs/md) — Compound tab interface with roving tabindex, automatic activation, and vertical/horizontal orientation. (package: `@sisyphos-ui/react`) - [Table](https://www.sisyphosui.com/docs/components/table/md) — Accessible data table with sorting, row selection, expandable rows, column truncation, skeleton loading, and integrated pagination. (package: `@sisyphos-ui/react`) - [Carousel](https://www.sisyphosui.com/docs/components/carousel/md) — Touch-friendly content rotator with autoplay, indicators, keyboard navigation, and reduced-motion support. (package: `@sisyphos-ui/react`) - [Kbd](https://www.sisyphosui.com/docs/components/kbd/md) — Keyboard key + shortcut renderer. Platform-aware `mod` glyph, built-in modifier/arrow/enter aliases, outlined + soft variants. (package: `@sisyphos-ui/react`) ## Overlays & Feedback - [Tooltip](https://www.sisyphosui.com/docs/components/tooltip/md) — Positioned hint with eight placement options, arrow, and delay control. Uses `aria-describedby`. (package: `@sisyphos-ui/react`) - [Popover](https://www.sisyphosui.com/docs/components/popover/md) — Non-modal floating panel for menus, forms, and custom UI. Closes on Escape and outside click. (package: `@sisyphos-ui/react`) - [Dropdown Menu](https://www.sisyphosui.com/docs/components/dropdown-menu/md) — Menu surface with `role="menu"` + `menuitem`, roving-tabindex arrow-key navigation, and focus return. (package: `@sisyphos-ui/react`) - [Dialog](https://www.sisyphosui.com/docs/components/dialog/md) — Modal dialog with focus trap, scroll lock, restore-on-close, and compound header/body/footer API. (package: `@sisyphos-ui/react`) - [Toast](https://www.sisyphosui.com/docs/components/toast/md) — Imperative notification API (`toast.success`, `toast.error`, `toast.promise`). Differentiates `role="alert"` from `role="status"`. (package: `@sisyphos-ui/react`) - [Context Menu](https://www.sisyphosui.com/docs/components/context-menu/md) — Right-click menu anchored at the pointer. Portal-mounted, viewport-clamped, keyboard-navigable. Same item shape as Dropdown Menu. (package: `@sisyphos-ui/react`) - [Command](https://www.sisyphosui.com/docs/components/command/md) — Keyboard-first command palette / filterable menu. Compound API with case-insensitive substring filter, groups, and full a11y (combobox/listbox/option). (package: `@sisyphos-ui/react`) ## Foundation - [Core](https://www.sisyphosui.com/docs/components/core/md) — Design tokens, `applyTheme`, theme mode helpers, and the CSS variable foundation that every package builds on. (package: `@sisyphos-ui/core`) - [Portal](https://www.sisyphosui.com/docs/components/portal/md) — Renders children to a dedicated root outside the parent DOM tree. Used by every overlay primitive. (package: `@sisyphos-ui/react`) - [Form Control](https://www.sisyphosui.com/docs/components/form-control/md) — Label, helper text, and error slot that wraps form inputs and wires up `aria-describedby`/`aria-invalid`. (package: `@sisyphos-ui/react`)