Combric

Combric is a native-first UI framework for modern web applications. It combines canonical design tokens, framework-independent CSS layout, and accessible React 19 components. Standard CSS is the default path; Tailwind CSS, the setup CLI, and Guard are optional.

Coordinated release source. Public packages share the version and channel declared by release/manifest.json; publication occurs only through the approved GitHub Actions release workflow.

Packages

Package	Purpose	Public entry points
@combric/tokens	Typed design tokens and generated CSS custom properties	., ./css
@combric/layout	Native Grid and Flexbox layout primitives	., ./css
@combric/react	React 19 component catalogue and typed layout wrappers	., ./css
@combric/menu	Navigation systems and advanced React menu patterns	., ./css
@combric/tailwind	Optional Tailwind CSS v4 adapter	.
@combric/cli	Optional setup and diagnostics for existing projects	., combric executable
@combric/guard	Optional read-only integration checks	., combric-guard executable

@combric/core is an empty private repository boundary and is not part of the public 1.0 release set.

Install and use

The smallest native-CSS path uses tokens directly:

npm install @combric/tokens

@import "@combric/tokens/css";

.panel {
  color: var(--combric-color-text);
  background: var(--combric-color-surface);
  padding: var(--combric-space-4);
}

For framework-independent layout:

npm install @combric/layout

@import "@combric/layout/css";

<main class="combric-container" data-size="wide">
  <section class="combric-grid" data-min-item-width="md" data-gap="4">
    ...
  </section>
</main>

For React 19:

npm install @combric/react react react-dom

@import "@combric/react/css";

import { Button, Card, Stack } from "@combric/react";

export function Example() {
  return (
    <Card>
      <Stack gap="4">
        <h2>Project</h2>
        <Button>Open</Button>
      </Stack>
    </Card>
  );
}

Applications already using Tailwind CSS >=4.3.0 <5 can add the optional adapter with npm install @combric/tailwind tailwindcss and import tailwindcss before @combric/tailwind.

Components and tooling

The React catalogue covers actions, layout, overlays, forms, feedback, disclosure, navigation, and semantic data display. The CLI can inspect, diagnose, and configure an existing project. Guard performs bounded, offline, read-only checks of package declarations, Combric CSS imports, supported React and Tailwind ranges, and token references. Guard is not a complete application validator or WCAG certification tool.

See each package README for its supported API and the static documentation in apps/docs for guides, component examples, Foundations, and the controlled Playground.

Supported environment

• Node.js 24 or newer for the CLI, Guard, and repository tooling.
• React and React DOM >=19.0.0 <20 for @combric/react.
• Tailwind CSS >=4.3.0 <5 for the optional adapter.
• Modern browsers for the emitted standard CSS and native semantics.

Development

corepack enable
pnpm install --frozen-lockfile
pnpm validate

The complete contributor workflow, breaking-change discipline, and release safety rules are documented in CONTRIBUTING.md. Release preparation additionally uses pnpm release:candidate; it packs and verifies local artifacts without publishing them.

License

Combric is available under the MIT License.