🌿 Chlorophyll

Warning

This project is currently under development.

A modern UI component library for React, built with TypeScript, Panda CSS, and Ark UI.

🛠 Tech Stack

TypeScript · React · Panda CSS · Ark UI

📦 Installation

The package is hosted on GitHub Packages. Point the @morinoparty scope at the registry in your .npmrc:

@morinoparty:registry=https://npm.pkg.github.com

pnpm add @morinoparty/chlorophyll-react

Add the Panda preset to panda.config.ts:

import { defineConfig } from "@pandacss/dev";
import { createPreset, stone } from "@morinoparty/chlorophyll-react/preset";

export default defineConfig({
  preflight: true,
  presets: ["@pandacss/preset-base", createPreset({ brandColor: "mori", grayColor: stone, radius: "md" })],
  include: ["./src/**/*.{ts,tsx}"],
  jsxFramework: "react",
  outdir: "styled-system",
});

📖 Usage

import { Button } from "@morinoparty/chlorophyll-react";

export function App() {
  return <Button>Click me!</Button>;
}

See the documentation and Storybook for the full component list and design tokens.

🚀 Development

pnpm install
pnpm dev            # all packages
pnpm dev:docs       # docs only
pnpm dev:storybook  # storybook only

Testing

pnpm dlx playwright install --with-deps
pnpm test           # component tests
pnpm test:vrt       # visual regression tests

🤝 Contributing

1. Fork this repository
2. Create a new branch
3. Commit your changes
4. Open a pull request

---

Made with 💚 by Morino Party