@breadcoop/ui 1.0.1 → 1.0.2

package/README.md

@@ -12,7 +12,7 @@ npm install @breadcoop/ui
 
 ### Option 1: Drop-in CSS Theme (Simplest)
 
-Perfect for projects that want to use pre-built components without configuration. **Fonts are included automatically!**
+Perfect for projects that want to use pre-built components without configuration.
 
 ```tsx
 import React from "react";
@@ -33,6 +33,21 @@ function App() {
 }
 ```
 
+**For custom fonts (optional):**
+
+```tsx
+// Import fonts separately if you want the custom Bread Coop fonts
+import "@breadcoop/ui/fonts";
+```
+
+**Note**: If you're using this in a project that already has Tailwind CSS, you might need to import the theme in your main CSS file instead:
+
+```css
+/* In your main CSS file (e.g., globals.css, index.css) */
+@import "@breadcoop/ui/theme";
+@import "@breadcoop/ui/fonts"; /* Optional: for custom fonts */
+```
+
 ### Option 2: Tailwind Preset (Maximum Flexibility)
 
 For projects that want full Tailwind integration with custom utilities and your design tokens.
@@ -234,6 +249,39 @@ import { ArrowUpRight, SignOut } from "@phosphor-icons/react";
 <LiftedButton disabled>Disabled Button</LiftedButton>
 ```
 
+## Troubleshooting
+
+### Theme Not Loading
+
+If the theme styles aren't appearing:
+
+1. **Check import path**: Make sure you're importing from `@breadcoop/ui/theme`
+2. **CSS import order**: Import the theme before your component styles
+3. **Build tool compatibility**: Some bundlers require CSS imports in CSS files rather than JS files
+
+**Try this approach:**
+
+```css
+/* In your main CSS file */
+@import "@breadcoop/ui/theme";
+```
+
+### Fonts Not Loading
+
+If fonts aren't displaying:
+
+1. **Check network tab**: Look for 404 errors on font files
+2. **Verify font paths**: The theme.css should be in `node_modules/@breadcoop/ui/dist/theme.css`
+3. **Clear cache**: Try clearing your browser cache and node_modules
+
+### Components Not Styled
+
+If components render but without styles:
+
+1. **Import theme**: Make sure you've imported `@breadcoop/ui/theme`
+2. **Check CSS specificity**: Your custom styles might be overriding the theme
+3. **Verify Tailwind**: If using Tailwind preset, ensure Tailwind is properly configured
+
 ## Development
 
 ```bash

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@breadcoop/ui",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "A component library for implementing Bread Coop branding in JS/TS projects",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -12,9 +12,9 @@
       "import": "./dist/index.mjs",
       "require": "./dist/index.js"
     },
-    "./style": "./dist/index.css",
     "./tailwind-preset": "./tailwind-preset.js",
-    "./theme": "./theme.css",
+    "./theme": "./dist/theme.css",
+    "./fonts": "./dist/fonts.css",
     "./package.json": "./package.json"
   },
   "files": [