@ibis-design/react

React 18/19 components of the IBIS design system 3.x, built on Skeleton v5 (zag) with the IBIS themes. Same props as @ibis-design/svelte. Client components ("use client"), safe to import from React Server Components.

npm install @ibis-design/css @ibis-design/react
npm install -D tailwindcss @tailwindcss/vite @tailwindcss/forms   # or @tailwindcss/postcss

In the app stylesheet (Tailwind CSS v4):

@import "tailwindcss";
@plugin "@tailwindcss/forms";
@import "@ibis-design/css";

import { Button, Dialog, toast, Toaster } from "@ibis-design/react";
import { useState } from "react";

export function DeleteCase() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <Button onClick={() => setOpen(true)}>Delete</Button>
      <Dialog
        open={open}
        onOpenChange={setOpen}
        role="alertdialog"
        title="Delete this case?"
        footer={
          <>
            <Button variant="secondary" onClick={() => setOpen(false)}>Keep</Button>
            <Button intent="destructive" onClick={() => { setOpen(false); toast.success("Case deleted"); }}>Delete</Button>
          </>
        }>
        <p>This cannot be undone.</p>
      </Dialog>
    </>
  );
}

// once, in the root component:
<Toaster />;

State follows React conventions: controlled value / checked / selected / open / page / sort with on*Change, or default* props for uncontrolled use. Text inputs are native (value + onChange). Content slots are ReactNode props (footer, actions, icon, …).

Components

| Area | Components | |---|---| | Actions | Button, IconButton, CopyButton, TextLink, Menu | | Forms | Field, TextField, TextArea, Select, Combobox, Checkbox, RadioGroup, Switch, FileUpload, Chip, SegmentedControl | | Content | Card, CardHeader, Alert, Badge, Avatar, UserBadge, Logo, Divider, Tooltip, Tabs, DescriptionList, StatCard | | Feedback and overlays | Toaster + toast, Progress, Spinner, Skeleton, SkeletonText, EmptyState, Dialog, Drawer | | Data | Table, DataTable, Pagination, FilterBar | | Layout | AppShell, AuthLayout, PageHeader, Stack, Grid, FormLayout, FormLayoutRow, ThemeToggle, LocaleProvider |

One line per component: llms.txt; every prop: component-manifest.json; page compositions: patterns.md (examples in Svelte; the props are the same). All three ship in this package.

Bring your own icons (lucide-react recommended). Don't import @skeletonlabs/* directly; @ibis-design/eslint-config enforces it.

AI coding agents

llms.txt, patterns.md and component-manifest.json are written for coding agents. Point the agent at them from the app's CLAUDE.md (Claude Code) or AGENTS.md (other agents; Claude Code reads it when CLAUDE.md contains the line @AGENTS.md):

## UI: IBIS design system (@ibis-design/react)

- Build all UI with `@ibis-design/react` components and `@ibis-design/css` tokens. Don't write custom components or
  styles for what the design system covers.
- Before writing or changing UI, read `node_modules/@ibis-design/react/llms.txt` (rules, patterns, components) and
  the matching pattern in `node_modules/@ibis-design/react/patterns.md` (Svelte examples; same props in React).
- Look up exact props in `node_modules/@ibis-design/react/component-manifest.json` instead of guessing them.
- Never import `@skeletonlabs/*` or `@zag-js/*`. Run the linter after UI changes.

To load the rules into every Claude Code session instead of on demand, add the line @node_modules/@ibis-design/react/llms.txt to CLAUDE.md (about 4,000 tokens of context).

Docs

Getting started (theme without flash incl. Next.js, fonts, toasts) · Migrating from 2.x · from 1.x · Storybook (npm run storybook:react)