Installation

Add Sketchpad UI to React, Next.js, or Flutter.

REACT / NEXT.JS

npm install sketchpad-ui @sketchpad/tokens
# or
pnpm add sketchpad-ui @sketchpad/tokens

Import styles

Load design tokens and component styles once in your app entry or root layout.

import '@sketchpad/tokens/tokens.css';
import 'sketchpad-ui/styles.css';

Use a component

import { Button, ThemeProvider } from 'sketchpad-ui';

export function App() {
  return (
    <ThemeProvider defaultTheme="system" defaultColor="blue">
      <Button variant="primary">Play</Button>
    </ThemeProvider>
  );
}

FLUTTER

flutter pub add sketchpad_ui

import 'package:sketchpad_ui/sketchpad_ui.dart';

MaterialApp(
  theme: sketchpadMaterialTheme(SketchpadThemeData.light()),
  darkTheme: sketchpadMaterialTheme(SketchpadThemeData.dark()),
  home: Scaffold(
    body: SketchButton(onPressed: () {}, child: const Text('Play')),
  ),
);