dev-tool-chest-ui
Version:
A Tailwind CSS v4 preset with modern OKLCH colors and shadcn-ui compatibility
157 lines (108 loc) • 3.53 kB
Markdown
# Dev Tool Chest UI Preset
A modern Tailwind CSS v4 preset that provides a beautiful and consistent design system using OKLCH colors. Perfect for projects using shadcn/ui or any other React components.
## Features
- 🎨 Modern OKLCH color system
- 🌓 Built-in dark mode support
- 📱 Responsive design utilities
- 🔤 DM Sans font integration
- 🎭 Comprehensive shadow system
- 📏 Consistent spacing and typography
- 🎯 Sidebar-specific theme variables
- 📊 Chart color palette
## Installation
```bash
npm install dev-tool-chest-ui
```
## Usage
1. Import the preset in your `tailwind.config.js`:
```js
import devToolChestPreset from "dev-tool-chest-ui/preset";
/** @type {import('tailwindcss').Config} */
export default {
presets: [devToolChestPreset],
// Your project-specific config here
content: ["./src/**/*.{js,jsx,ts,tsx}"],
};
```
2. Import the theme CSS in your main CSS file:
```css
@import "tailwindcss";
@import "dev-tool-chest-ui/theme.css";
/* Your custom CSS here */
```
## Theme Variables
### Colors
Base UI colors with semantic meaning:
- `--background`, `--foreground`
- `--card`, `--card-foreground`
- `--popover`, `--popover-foreground`
- `--primary`, `--primary-foreground`
- `--secondary`, `--secondary-foreground`
- `--muted`, `--muted-foreground`
- `--accent`, `--accent-foreground`
- `--destructive`, `--destructive-foreground`
Chart colors for data visualization:
- `--chart-1` through `--chart-5`
Sidebar-specific colors:
- `--sidebar`, `--sidebar-foreground`
- `--sidebar-primary`, `--sidebar-primary-foreground`
- `--sidebar-accent`, `--sidebar-accent-foreground`
- `--sidebar-border`, `--sidebar-ring`
### Typography
- Font: DM Sans (automatically imported)
- Letter spacing utilities:
- `--tracking-tighter` through `--tracking-widest`
### Spacing & Sizing
- Base spacing unit: `--spacing: 0.25rem`
- Border radius: `--radius` with variants:
- `--radius-sm`, `--radius-md`, `--radius-lg`, `--radius-xl`
### Shadows
Multiple shadow levels for depth:
- `--shadow-2xs` through `--shadow-2xl`
## Dark Mode
Dark mode is implemented using CSS custom properties. Enable it by adding the `dark` class to any parent element:
```html
<html class="dark">
<!-- Your app content -->
</html>
```
Or toggle it with JavaScript:
```javascript
// Toggle dark mode
document.documentElement.classList.toggle("dark");
```
## Customization
### Overriding Colors
You can override any color in your CSS:
```css
@theme {
--primary: oklch(0.6191 0.1789 44.3709);
--primary-foreground: oklch(1 0 0);
}
```
### Extending the Theme
Extend or override the theme in your `tailwind.config.js`:
```js
import devToolChestPreset from "dev-tool-chest-ui/preset";
/** @type {import('tailwindcss').Config} */
export default {
presets: [devToolChestPreset],
theme: {
extend: {
// Your extensions here
},
},
};
```
## Best Practices
1. **Consistent Import Order**: Always import Tailwind CSS before the theme
2. **Dark Mode**: Use the `dark` class on a parent element
3. **Color Usage**: Use semantic color variables instead of direct color values
4. **Shadows**: Use the provided shadow scale for consistent depth
5. **Typography**: Leverage the DM Sans font and tracking utilities
## TypeScript Support
The preset includes TypeScript types. No additional setup needed.
## Contributing
Feel free to open issues or submit pull requests. For major changes, please open an issue first to discuss what you would like to change.
## License
MIT