braid-ui 1.0.5 → 1.0.6

package/README.md

@@ -10,9 +10,18 @@ npm install braid-ui
 
 ## Setup
 
-**No additional setup required!** The styles are automatically bundled with the components.
+### 1. Import the styles
 
-However, if you want to customize the styling, you can configure Tailwind CSS in your project:
+You need to import the CSS styles for the components to display correctly:
+
+```tsx
+// In your main App.tsx or main CSS file
+import 'braid-ui/styles'
+```
+
+### 2. Configure Tailwind CSS
+
+Your project needs Tailwind CSS configured. If you don't have it:
 
 ```bash
 npm install -D tailwindcss postcss autoprefixer
@@ -29,7 +38,48 @@ module.exports = {
     "./node_modules/braid-ui/dist/**/*.{js,ts,jsx,tsx}", // Add this line
   ],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
+        },
+        popover: {
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))',
+        },
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
+        },
+      },
+      borderRadius: {
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
+      },
+    },
   },
   plugins: [],
 }