- Node.js v20+
- pnpm v9+
pnpm install turbo --global
- Copy the environment template:
cp app/website/.env.template app/website/.env
- Fill in required values in the new
.env
file
pnpm dev
Components are organized in a structured hierarchy:
📁 /packages/ui/cuicui
├── 📁 [section_name]
│ ├── 📁 [category_name]
│ │ ├── 📁 [component_name]
│ │ │ ├── 📄 [variant1_name].variant.tsx
│ │ │ ├── 📄 [variant2_name].variant.tsx
│ │ │ └── 📄 component.ts
│ │ └── ...
│ ├── 📁 [category_name]
│ │ ├── 📁 [component_name]
│ │ │ ├── 📄 [variant1_name].variant.tsx
│ │ │ └── 📄 component.ts
│ │ └── ...
│ └── ...
└── ...
- Create component directory:
mkdir -p packages/ui/cuicui/[section]/[category]/YourComponentName
- Add base component (
component.ts
):
// Example component structure
export interface ComponentProps {
// Type definitions
}
export const BaseComponent = (props: ComponentProps) => {
// Implementation
}
- Create variants (
*.variant.tsx
):// primary.variant.tsx export const PrimaryVariant = (props: ComponentProps) => ( <BaseComponent {...props} className="primary-style" /> )
- Run the "pre-build" script to generate component exports:
pnpm pre-build
We are using Gitmoji for our commit messages. You can find the rules at gitmoji.dev