🌿 Chlorophyll 🌿

Warning

This project is currently under development.

✨ About the Project

Chlorophyll is a modern and user-friendly UI component library built with React and TypeScript.

🛠 Tech Stack

• 🎨 Language: TypeScript
• ⚛️ Framework: React
• 🎯 CSS Library: PandaCSS
• 🎭 Headless Library: Ark UI

🚀 Setting Up the Development Environment

🎯 Check UI Components

pnpm run dev

🧪 Testing

Install dependencies

pnpm dlx playwright install --with-deps

🎯 Check UI Components

pnpm run test:runner

🎯 Check VRT

pnpm run test:vrt

📦 Installation

1. Install PandaCSS

Getting Started - PandaCSS

2. Install React Aria

pnpm add 

3. Install the Panda Preset
```bash
pnpm add @ark-ui/react

import { defineConfig } from '@pandacss/dev'
import { createPreset } from '@moripa/chlorophyll-preset'
import mori from '@moripa/chlorophyll-preset/colors/accent/mori'
import stone from '@moripa/chlorophyll-preset/colors/base/stone'

export default defineConfig({
  preflight: true,
  presets: [createPreset({ accentColor: mori, grayColor: stone, radius: 'sm' })],
  include: ['./src/**/*.{js,jsx,ts,tsx}'],
  jsxFramework: 'react',
  outdir: 'styled-system',
})

4. Path alias tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@styled-system/*": ["./styled-system/*"]
    }
  }
}

📖 Usage

import { Button } from '@moripa/chlorophyll';

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

token

🤝 Contribution

Contributions are welcome! Follow these steps to participate:

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

---

Made with 💚 by Morino party team