Installation

Install Natcore, import the stylesheet, and start using component classes in your markup.

Quick start

Add Natcore and Tailwind to the app that owns your global stylesheet.

pnpm

Codebash

pnpm add @nataliebasille/natcore-design-system tailwindcss

npm

Codebash

npm install @nataliebasille/natcore-design-system tailwindcss

yarn

Codebash

yarn add @nataliebasille/natcore-design-system tailwindcss

Load Tailwind first, then Natcore. The import registers tokens, component classes, modifiers, and color palettes.

Codecss

@import "tailwindcss";
@import "@nataliebasille/natcore-design-system";

Natcore is CSS-first, so the same classes work in React, server-rendered templates, or plain HTML.

Codehtml

<html data-theme="citrine-reef">
  <body>
    <button class="button button-solid/primary">
      Create project
    </button>
  </body>
</html>

Run a production build once after the import is in place so Tailwind can emit the classes used by your app.

Codebash

pnpm build

Start with button, card, badge, divider, list, toggle, and tray.

Modifiers

Pair component classes with palette and state modifiers to keep markup readable.

Themes

Set data-theme on the root element and the same HTML follows the new palette.