@jcsoftdev/ui

Design system for React + Tailwind

One token file. Six looks. Zero runtime.

264 accessible components, 95 chart types, a spreadsheet-grade DataGrid and an AI chat kit. Switch the whole look with a data attribute: the CSS does the rest. Try it on the right, the entire page restyles.

Get started See it live

pnpm add @jcsoftdev/ui react react-dom

Role tokens in plain CSS: presets, accents, dark mode, density and radius are attribute selectors.
Container queries everywhere, so components adapt to the space they get, not to the viewport.
Docs for people and for LLMs: every page also ships as Markdown, plus llms.txt.

Try the look

Five attributes. The whole page restyles.

data-style

<html data-style="soft" data-accent="coral"
      data-theme="dark" data-density="normal">

Citas hoy18+4 vs. ayer

IngresosS/ 1 240Meta S/ 1 100

Luis Ramírez
16:00 · Corte + barba · Diego
Marco Salazar
16:30 · Perfilado · Ana
Andrés Paredes
17:00 · Fade · Rosa

NuevoRecordatorios

264components

95chart types

1210documented stories

15tree-shakeable subpaths

6style presets

0runtime theming JS

Real components, not screenshots

See it live

Everything below is the published library running in your browser. Drag the Kanban cards, edit a spreadsheet cell, hover the globe. Change the look above and watch every tile follow.

Revenue dashboard

KPIs and charts that fill their container

Meta superada

Globe with routes

Drag, or use the arrow keys

SVG

Crossfilter

Click a bar or drag the hours: every chart follows

Linked

Kanban

Drag cards, or pick them up with the keyboard

Drag and drop

Calendar and agenda

Week view, 5 to 11 October

Logo Forge

Generate and export a brand mark

SVG / PNG

Zero runtime theming

The same markup, six looks

These cards are server-rendered with identical HTML. The only difference is one data-style attribute on the wrapper. No theme provider, no CSS-in-JS, no JavaScript on this page for any of it.

<section data-style="brutal" data-accent="lavanda">
  <!-- same components, new look -->
</section>

soft

Rounded, quiet shadows

data-style

Diego Quispe

16:00 · Corte + barba

Ingresos de hoyS/ 1 240+12% vs. ayer

bordered

Hairlines, no shadows

data-style

Diego Quispe

16:00 · Corte + barba

Ingresos de hoyS/ 1 240+12% vs. ayer

elevated

Layered depth

data-style

Diego Quispe

16:00 · Corte + barba

Ingresos de hoyS/ 1 240+12% vs. ayer

flat

No borders, no shadows

data-style

Diego Quispe

16:00 · Corte + barba

Ingresos de hoyS/ 1 240+12% vs. ayer

glass

Translucent, blurred

data-style

Diego Quispe

16:00 · Corte + barba

Ingresos de hoyS/ 1 240+12% vs. ayer

brutal

Hard edges, offset shadow

data-style

Diego Quispe

16:00 · Corte + barba

Ingresos de hoyS/ 1 240+12% vs. ayer

95 chart types, zero chart dependencies

Charts that fill their cell

SVG charts built on the same tokens, with keyboard navigation and accessible summaries. A dozen of them below, each filling its container exactly. Browse them all in the docs.

Spreadsheet-grade DataGrid

Type = to write a formula

Virtualized rows, range selection, undo and redo, copy and paste, and a formula engine with SUM, IF, ROUND and friends. Edit a price and every total recalculates. Export to XLSX from the toolbar.

AI kit

Chat, reasoning and tool calls

Conversation, streaming Markdown, chain of thought, tool calls, sources, attachments and message actions. Press a suggestion: the reply is simulated and streams token by token.

Accessible + container queries

Responsive to the container, not the screen

Resize the frame: the KPI group reflows from four columns to one and the chart keeps its height, all with @container rules. Focus rings, roles, keyboard paths and reduced-motion handling are part of every component, not an add-on.

Container width

Citas atendidas: 214sube, favorable: +4.1%vs. septiembre
Ticket promedio: S/ 47sube, favorable: +6.8%vs. septiembre
Ocupación: 78%baja, desfavorable: -2.4%vs. septiembre
Cancelaciones: 9baja, favorable: -18%vs. septiembre

Install

Three snippets and you are in

pnpm add @jcsoftdev/ui react react-dom

@import "tailwindcss";
@import "@jcsoftdev/ui/styles/tokens.css";
@import "@jcsoftdev/ui/styles/theme.css";
@import "@jcsoftdev/ui/styles/base.css";
@source "../node_modules/@jcsoftdev/ui/dist";

import { Button, Chip } from "@jcsoftdev/ui/atoms";
import { LineChart } from "@jcsoftdev/ui/charts";
import { DataGrid } from "@jcsoftdev/ui/containers";

export function Revenue() {
  return (
    <section data-style="glass" data-accent="menta">
      <Chip tone="accent">Live</Chip>
      <LineChart height={240} title="Revenue" categories={days} series={series} />
      <Button variant="primary">Export</Button>
    </section>
  );
}

Docs for people and for LLMs

Every page, as HTML and as Markdown

DocumentationGuides, theming and 264 component pages with live examples.Storybook1210 stories to poke at every state.llms.txtA curated index of the docs for language models.llms-full.txtThe whole documentation as one Markdown file. Add .md to any docs URL for its page.