Get Started

Installation


# npm
npm install pine-design-system
 
# yarn
yarn add pine-design-system
 
# pnpm
pnpm add pine-design-system

React 18 or higher is required.

Basic Usage

Wrap your app root with ThemeProvider and import the stylesheet once.


import { ThemeProvider, Button } from "pine-design-system";
import "pine-design-system/style.css";
 
export default function App() {
  return (
    <ThemeProvider defaultDesign="basic">
      <Button intent="primary">Click me</Button>
    </ThemeProvider>
  );
}

ThemeProvider Options

Prop	Type	Default	Description
`defaultDesign`	`"basic" \| "game" \| "crayon"`	`"basic"`	Initial design concept (uncontrolled).
`design`	`"basic" \| "game" \| "crayon"`	—	Design concept (controlled). Use with `onDesignChange`.
`defaultTheme`	`"light" \| "dark"`	—	Initial color mode (uncontrolled).
`theme`	`"light" \| "dark"`	—	Color mode (controlled). Use with `onThemeChange`.
`syncWithSystem`	`boolean`	`true`	Follows the OS color scheme when `theme` is uncontrolled. Set to `false` to use `defaultTheme` instead.
`primaryColor`	`string`	—	Hex color to customize the primary palette (e.g. `"#6366f1"`).


<ThemeProvider design="game" defaultTheme="dark">
  {/* Game style + dark mode */}
</ThemeProvider>

Next Steps

Foundation: Token structure (colors, typography, spacing)
Components: Component list and usage