Clawscale

Core

@clawscale/react holds every Blueprint core component with the Clawscale look, plus Clawscale patterns and the theme provider.

Install#

npm install @clawscale/react

Clawscale installs Blueprint for you, pinned to the version its styles were built for. Do not install @blueprintjs/* next to it.

Load the styles#

Import 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, and IBM Plex for the Ledger theme.

Add the provider#

Wrap your app in ClawscaleProvider once. It sets up overlays, hotkeys and portals, and manages the light, dark and system themes.

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

export function App({ children }: { children: React.ReactNode }) {
  return <ClawscaleProvider>{children}</ClawscaleProvider>;
}

See Clawscale provider for its props.

Entry points#

ImportContents
@clawscale/reactCore components, hooks, constants and Clawscale patterns
@clawscale/react/selectSelect, Suggest, MultiSelect, Omnibar and QueryList
@clawscale/react/datetimeDate and time pickers and inputs
@clawscale/react/tableTable, the spreadsheet-like data grid
@clawscale/react/iconsIcon names, icon components and the icon loader
@clawscale/react/commonServer-safe constants: Classes, Intent, Colors, ClawscaleClasses and more
@clawscale/react/sync-iconsSide-effect import that renders icons synchronously on the server
@clawscale/react/styles.cssnormalize.css, Blueprint's CSS and the Clawscale layer
@clawscale/react/fonts.cssInter and JetBrains Mono, and IBM Plex for Ledger. Optional.

Every component export carries "use client", so server components can render them. To read a constant such as Classes.DARK in a server component, import it from @clawscale/react/common.

Foundations#

  • Accessibility: focus, contrast, labels and motion.
  • Classes: CSS class constants for your own elements.
  • Colors: semantic colors and the chart palette.
  • Typography: fonts, type scale and text components.
  • Tokens: every --cs-* variable.

Next steps#