dev-tool-chest-ui

v1.0.14

Published

7 months ago

A Tailwind CSS v4 preset with modern OKLCH colors and shadcn-ui compatibility

Downloads

0High
0Medium
0Low

gustavoallm

tailwindcss preset theme oklch shadcn-ui design-system

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

npm install dev-tool-chest-ui

Usage

Import the preset in your tailwind.config.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}"],
};

Import the theme CSS in your main CSS file:

@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 class="dark">
  <!-- Your app content -->
</html>

Or toggle it with JavaScript:

// Toggle dark mode
document.documentElement.classList.toggle("dark");

Customization

Overriding Colors

You can override any color in your 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:

import devToolChestPreset from "dev-tool-chest-ui/preset";

/** @type {import('tailwindcss').Config} */
export default {
  presets: [devToolChestPreset],
  theme: {
    extend: {
      // Your extensions here
    },
  },
};

Best Practices

Consistent Import Order: Always import Tailwind CSS before the theme
Dark Mode: Use the dark class on a parent element
Color Usage: Use semantic color variables instead of direct color values
Shadows: Use the provided shadow scale for consistent depth
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