Introduction
Clawscale is a React UI system for data-dense software. It keeps Blueprint's components, APIs and principles, and gives them a refined look.
What you get#
- Every Blueprint component, imported from
@clawscale/react. - Token-driven themes, each with light and dark color schemes.
- Next.js support. Components carry
"use client"and render on the server. - Patterns for dense screens: metrics, sparklines, property lists and status bars.
Packages#
| Package | Contents |
|---|---|
@clawscale/react | Components, styles and patterns. Subpaths: /select, /datetime, /table, /icons, /common. |
@clawscale/tokens | Design tokens as CSS variables, JSON and TypeScript. |
Built on Blueprint#
Clawscale wraps Blueprint instead of forking it. Blueprint renders every component. Clawscale adds tokens, a style layer and entry points for Next.js. Blueprint fixes arrive with each Clawscale release.
Next steps#
- Getting started: install and render your first component.
- Next.js: server components, the theme script and icons.
- Theming: tokens, dark mode and your brand color.
- Showcase: complete data-dense screens built with Clawscale.