Get started

Coal Series ships as a monorepo powered by Turborepo. The quickest way to explore is cloning the repository and installing dependencies.

1. Install

npm install

2. Run the showcase app

npm run dev -- --filter=apps/showcase

This spins up the live dashboard using the React components and Tailwind preset.

3. Run the docs site

npm run dev -- --filter=apps/docs

Visit http://localhost:3000 to browse the documentation with hot reload.

4. Copy the tokens

Bring Coal Series tokens into any Tailwind project by extending your theme:

// tailwind.config.ts
import type { Config } from "tailwindcss";

export default {
  darkMode: "class",
  content: ["./src/**/*.{ts,tsx,mdx}"],
  theme: {
    extend: {
      colors: {
        coal: {
          bg: "#0B0D10",
          "bg-alt": "#11141A",
          surface: "#161B24",
          border: "#1F242E",
          text: {
            primary: "#F8FAFC",
            secondary: "#C2C7D3",
            muted: "#8893A8",
          },
          accent: {
            electric: "#38A0FF",
            purple: "#7E4DFF",
            emerald: "#2AD0A8",
          },
        },
      },
    },
  },
} satisfies Config;

5. Compose interfaces

Coal Series surfaces are built by layering tokens. For example, the primary action button:

export function PrimaryAction() {
  return (
    <button className="inline-flex items-center justify-center gap-2 rounded-base bg-coal-accent-electric px-5 py-2.5 text-body font-semibold text-coal-text-inverse shadow-[0_12px_32px_-18px_rgba(56,160,255,0.65)] transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-coal-accent-electric/40 focus-visible:ring-offset-2">
      Launch scan
    </button>
  );
}

6. Contribution workflow

1. Create a branch describing the change.
2. Run npm run lint and npm run typecheck.
3. Add tests for any new utilities or docs examples (npm run test).
4. Submit a pull request; GitHub Actions will run builds and publish preview docs via Vercel.

Licensing

Coal Series is released under the MIT license. See LICENSE in the repo root for terms.