Clawscale

Getting started

Install one package, load one stylesheet, wrap your app once.

Install#

npm install @clawscale/react

Clawscale supports React 18 and 19. It installs Blueprint for you, pinned to a tested version.

Add the styles#

Load the stylesheet once, at the root of your app.

import "@clawscale/react/styles.css";
import "@clawscale/react/fonts.css";

styles.css holds normalize.css, Blueprint's CSS and the Clawscale layer. fonts.css is optional: it loads Inter and JetBrains Mono, the typefaces Clawscale is tuned for, and IBM Plex for the Ledger theme.

Wrap your app#

import { ClawscaleProvider } from "@clawscale/react";

export function App() {
  return <ClawscaleProvider>{/* your app */}</ClawscaleProvider>;
}

ClawscaleProvider sets up overlays, hotkeys and portals, and manages the theme and the light, dark and system color schemes. See Clawscale provider.

Render a component#

Nightly export

Last run finished in 4m 12s. healthy

guides/getting-started/first-screen.tsx
import { Button, Card, H5, Tag } from "@clawscale/react";

export default function FirstScreen() {
  return (
    <Card style={{ width: 320 }}>
      <H5>Nightly export</H5>
      <p>
        Last run finished in 4m 12s.{" "}
        <Tag minimal intent="success">
          healthy
        </Tag>
      </p>
      <Button intent="primary" icon="play" text="Run now" />
    </Card>
  );
}

Entry points#

ImportContents
@clawscale/reactCore components, hooks and Clawscale patterns
@clawscale/react/selectSelect, Suggest, MultiSelect, Omnibar, QueryList
@clawscale/react/datetimeDate and time pickers and inputs
@clawscale/react/tableThe spreadsheet-like Table
@clawscale/react/iconsIcon names, icon components and the icon loader
@clawscale/react/commonConstants that are safe in React Server Components
@clawscale/react/sync-iconsSynchronous icon loading for server rendering
@clawscale/tokensDesign tokens as CSS variables, JSON and TypeScript

Browser support#

Clawscale targets the last two versions of Chrome, Edge, Firefox and Safari. It needs CSS cascade layers and color-mix().

Next steps#