GETTING STARTED / 01

One package.
Your next interface.

Coal is an independent React library. Its components, interactions and styles live here. No component framework or Tailwind setup required in your project.

1. Install Coal

This version is available as an npm-compatible archive. Keep the local server running while installing it, or download the archive and share it with your team. React 19 and React DOM 19 are required.

Terminal

npm install http://localhost:3100/downloads/chlohal-coal-ui-0.5.0.tgz

Download @chlohal/coal-ui 0.5.0 ↗

The package has not been published to npm. Once published, installation will be npm install @chlohal/coal-ui. The archive works now without publication.

2. Import the styles once

In your React application entry point, or app/layout.tsx in Next.js:

import "@chlohal/coal-ui/styles.css";

The stylesheet is already compiled. It uses coal-prefixed classes and variables, with no global reset. Your application controls its own page layout and typography.

3. Build something

import { Button, Input, Label } from "@chlohal/coal-ui";

export function ContactForm() {
  return (
    <form style={{ display: "grid", gap: 12, maxWidth: 320 }}>
      <Label htmlFor="email">Email address</Label>
      <Input id="email" name="email" type="email" required />
      <Button type="submit">Continue</Button>
    </form>
  );
}

Optional local typography

import "@chlohal/coal-ui/fonts.css"; // after styles.css

IBM Plex Sans and Mono are bundled locally with their licenses. Use var(--coal-font-sans) for your application text. See Foundations for typography, motion and semantic status rules.

What comes with the package?

55 components, named ES module exports and TypeScript declarations.
Original React implementations and native browser controls.
One stylesheet with square corners and charcoal/copper tokens.
No runtime dependencies except React and React DOM peers.

Overlays and notifications

Dialogs use the native HTML dialog element. Floating panels handle positioning, dismissal and keyboard navigation within Coal. Wrap your app in ToastProvider before calling useToast. Essential information must always have a visible label.

Development and distribution

npm ci
npm run package:build
npm run dev -- --port 3100

# Build package, examples and documentation
npm run build

The package source is in packages/react/src. The build emits JavaScript, declarations, CSS and an archive under public/downloads. It does not publish anything externally.

Next up

Customize the theme or explore the components.

One package.Your next interface.