Kiln

Kiln is a themeable React design system and form library, published to npm under the @mitcsutt scope, along with the shared ESLint, Prettier and TypeScript configs it's built with.

Status: pre-1.0. Every package is published to npm at 0.x, so a minor release can still carry breaking changes. The docs site deploys from main to kiln.mitchellsutton.com. Storybook isn't deployed yet, but it runs locally (see Apps). Releases follow docs/releasing.md, and the reasoning behind each decision is in docs/adr/.

What Kiln is for

I kept rebuilding the same components, form plumbing and lint configs across projects. Kiln collects them in one place, so a new project can install them, pick a theme and start building.

Packages

Package	What it is	npm
@mitcsutt/kiln-ui	Themeable components on Radix primitives, with plain CSS, design tokens, and a default theme plus opt-in presets
@mitcsutt/kiln-forms	A form library on TanStack Form. Forms can be written as components or described as JSON schemas, and both render through kiln-ui.
@mitcsutt/kiln-dnd	Drag and drop on kiln-ui: sortable lists, kanban boards, drop zones and dashboard grids, with one keyboard model and one announcer
@mitcsutt/kiln-charts	Themed, accessible charts that render on the server: presets first, and parts to compose your own
@mitcsutt/kiln-eslint-config	A shared, type-aware flat ESLint config
@mitcsutt/kiln-prettier-config	A shared Prettier config
@mitcsutt/kiln-tsconfig	Shared TypeScript presets
@mitcsutt/kiln-structure	A recommended structure for React web apps, with an ESLint preset that enforces it

More general utilities will follow as @mitcsutt/kiln-* packages.

Apps

App	What it is	Run it locally
apps/docs	The public docs site: every component, field, layout and hook with a live example, generated API tables, guides, search, and Markdown for agents	pnpm --filter @mitcsutt/kiln-docs-site dev
apps/storybook	The developer workbench: every ui, forms and drag-and-drop story, in every theme and mode, each one a render, interaction and a11y test	pnpm --filter @mitcsutt/kiln-storybook dev

Quick start

Install the UI and, if you need forms, the form library:

pnpm add @mitcsutt/kiln-ui @mitcsutt/kiln-forms

Load the stylesheet once and wrap the app in a theme:

import '@mitcsutt/kiln-ui/styles.css'
import { Button, Stack, Text, ThemeProvider } from '@mitcsutt/kiln-ui'

export function App() {
  return (
    <ThemeProvider>
      <Stack gap={4}>
        <Text>Next sailing to Kelso Bay boards at berth 3.</Text>
        <Button>Book a seat</Button>
      </Stack>
    </ThemeProvider>
  )
}

This is the beginning of the README. Read the rest at the original. Read the full README ↗