@krrli/cm-designsystem 1.34.10 → 1.34.12

package/README.md

@@ -20,7 +20,7 @@ A modern React component library built with TypeScript, Tailwind CSS, and Storyb
 
 ## Usage in Your Project
 
-To use the components and styles in your project with Tailwind CSS v4:
+**Easiest approach:** Just import the complete CSS bundle with all styles and responsive breakpoints!
 
 ### 1. Install the package
 
@@ -28,47 +28,58 @@ To use the components and styles in your project with Tailwind CSS v4:
 npm install @krrli/cm-designsystem
 ```
 
-### 2. Configure Tailwind CSS in your consuming app
+### 2. Install peer dependencies
 
-In your app's CSS file (e.g., `app/globals.css` or `src/index.css`), add:
+```bash
+npm install @radix-ui/react-accessible-icon @radix-ui/react-aspect-ratio @radix-ui/react-avatar @radix-ui/react-dialog @radix-ui/react-form @radix-ui/react-tabs @radix-ui/react-toggle
+```
+
+### 3. Import the complete CSS
+
+In your app's CSS file (e.g., `app/globals.css`):
 
 ```css
 @import "tailwindcss";
+@import "@krrli/cm-designsystem/styles.css";
+```
 
-/* Import the design system's Tailwind configuration and theme */
-@import "@krrli/cm-designsystem/src/index.css";
+### 4. Use components
 
-/* Scan the design system's components for Tailwind classes */
-@source "../node_modules/@krrli/cm-designsystem/dist/**/*.js";
+```tsx
+import { Button, Post } from "@krrli/cm-designsystem";
 
-/* Your app's custom theme/styles can go here */
+export default function Page() {
+  return <Button intent="primary">Click me</Button>;
+}
 ```
 
-### 3. Install required peer dependencies
+**That's it!** All responsive breakpoints (sm:, md:, lg:, etc.) work automatically.
 
-```bash
-npm install @radix-ui/react-accessible-icon @radix-ui/react-aspect-ratio @radix-ui/react-avatar @radix-ui/react-dialog @radix-ui/react-form @radix-ui/react-tabs @radix-ui/react-toggle
-```
+---
 
-### 4. Import and use components
+### Advanced: Use Tailwind Preset (Optional)
 
-```tsx
-import { Button } from "@krrli/cm-designsystem";
+If you want to customize or extend the design system:
 
-function App() {
-  return (
-    <Button intent="primary" size="md" onClick={() => console.log("Clicked!")}>
-      Click me
-    </Button>
-  );
-}
+**Configure Tailwind:**
+
+```typescript
+import type { Config } from "tailwindcss";
+import designSystemPreset from "@krrli/cm-designsystem/tailwind.preset";
+
+export default {
+  presets: [designSystemPreset],
+  content: ["./src/**/*.{ts,tsx}"],
+} satisfies Config;
 ```
 
-### Notes
+**Use design tokens:**
+
+```typescript
+import { colors, fonts } from "@krrli/cm-designsystem/tokens";
+```
 
-- **Tailwind CSS v4**: This design system uses Tailwind CSS v4. Your consuming app must also use Tailwind v4 with the `@tailwindcss/vite` plugin.
-- **Source-based approach**: The design system ships JavaScript/TypeScript source files. Your app's Tailwind processes all utility classes, including responsive variants.
-- **Font**: The Poppins font is bundled with the design system and will be automatically available when you import the CSS.
+- ✅ **Framework-compatible**: Works with Next.js, Vite, and other tools
 
 ````