mirror of https://github.com/buster-so/buster.git
88 lines
1.8 KiB
Markdown
88 lines
1.8 KiB
Markdown
# @buster/ui-components
|
|
|
|
A modern, tree-shakeable UI component library built with React, TypeScript, and Tailwind CSS 4.
|
|
|
|
## Installation
|
|
|
|
This is an internal monorepo package. It's automatically available to other packages in the workspace.
|
|
|
|
## Usage
|
|
|
|
### Components
|
|
|
|
Components must be imported from their specific paths for optimal tree-shaking:
|
|
|
|
```typescript
|
|
import { BusterChart } from '@buster/ui-components/components/charts';
|
|
```
|
|
|
|
### Hooks
|
|
|
|
```typescript
|
|
import { useDebounce, useSize, useMount } from '@buster/ui-components/hooks';
|
|
```
|
|
|
|
### Utilities
|
|
|
|
```typescript
|
|
import { formatNumber, formatDate, classMerge } from '@buster/ui-components/lib';
|
|
```
|
|
|
|
### Styles
|
|
|
|
Import the styles in your app's main CSS file:
|
|
|
|
```css
|
|
/* In your app.css or globals.css */
|
|
@import "@buster/ui-components/styles";
|
|
```
|
|
|
|
This includes:
|
|
- Tailwind CSS 4 with Buster's custom theme
|
|
- Component-specific styles
|
|
- Custom utilities
|
|
|
|
## Theme Customization
|
|
|
|
Override theme variables in your app:
|
|
|
|
```css
|
|
@theme {
|
|
/* Override any Buster theme variable */
|
|
--color-buster-primary: oklch(70% 0.25 350);
|
|
}
|
|
```
|
|
|
|
Available theme variables include:
|
|
- Colors: `--color-buster-primary`, `--color-buster-secondary`, etc.
|
|
- Typography: `--font-size-buster-lg`, `--font-size-buster-xl`, etc.
|
|
- Spacing: `--spacing-buster-md`, `--spacing-buster-lg`, etc.
|
|
- Shadows: `--shadow-buster-sm`, `--shadow-buster-md`, etc.
|
|
|
|
## Development
|
|
|
|
```bash
|
|
# Build the library
|
|
pnpm run build
|
|
|
|
# Run in watch mode
|
|
pnpm run dev
|
|
|
|
# Run tests
|
|
pnpm run test
|
|
|
|
# Type check
|
|
pnpm run typecheck
|
|
```
|
|
|
|
## Import Strategy
|
|
|
|
- **Components**: Direct imports only (no barrel exports)
|
|
- **Hooks & Utilities**: Barrel exports for convenience
|
|
- **Styles**: Single import for all styles
|
|
|
|
This approach maximizes tree-shaking for components while maintaining good DX for smaller modules.
|
|
|
|
## License
|
|
|
|
See LICENSE file in the root of the monorepo. |