Bamboo React

How to install

1. Install pandacss

pnpm add -D @pandacss/dev
pnpm panda init --postcss

2. Add css layer in your root app. See pandacss instalation webpage (next/remix/vite) for details

/* src/app.css */
@layer reset, base, tokens, recipes, utilities;

3. Add Dependecy

pnpm add @bamboo-ds/recipe @bamboo-ds/react

4. Add @bamboo-ds/recipe in panda config

// panda.config.ts
import { recipes } from '@bamboo-ds/recipe'; // <- Add this line
import { defineConfig } from '@pandacss/dev';

export default defineConfig({
  // ...

  // Useful for theme customization
  theme: {
    extend: {
      recipes, // <- Add this line
    },
  },

  // ...
});

5. Use the component in your page!

// page.tsx
import { Button } from '@bamboo-ds/react';

type Props = {};
export function Page(props: Props) {
  return (
    <div>
      <Button visual='secondary'>Hello Bamboo!</Button>
    </div>
  );
}