@engrate/components 0.0.2 → 0.0.4

package/README.md

@@ -5,7 +5,7 @@ A React component library built with Tailwind CSS, following Engrate's brand gui
 ## Installation
 
 ```bash
-npm install eg-components
+npm install @engrate/components
 ```
 
 ### Peer Dependencies
@@ -18,46 +18,58 @@ npm install react react-dom
 
 ## Usage
 
-### Option 1: Pre-compiled CSS (Non-Tailwind Projects)
-
-Import the compiled CSS bundle for projects not using Tailwind:
+Import the styles and use the components:
 
 ```tsx
-import { Button } from 'eg-components'
-import 'eg-components/styles.css'
+import { Button } from '@engrate/components'
+import '@engrate/components/styles.css'
 
 function App() {
   return <Button variant="primary">Click me</Button>
 }
 ```
 
-### Option 2: Tailwind Preset (Tailwind Projects)
-
-Extend your Tailwind config with Engrate's design tokens:
+### Using with Tailwind CSS v4
 
-```js
-// tailwind.config.js
-import { egComponentsPreset } from 'eg-components/tailwind.preset'
+If your project uses Tailwind CSS v4, import the styles in your main CSS file. The component library exports all design tokens as CSS custom properties which Tailwind v4 will automatically detect:
 
-export default {
-  presets: [egComponentsPreset],
-  content: [
-    './src/**/*.{js,ts,jsx,tsx}',
-    './node_modules/eg-components/dist/**/*.js',
-  ],
-}
+```css
+/* app.css */
+@import 'tailwindcss';
+@import '@engrate/components/styles.css';
 ```
 
-Then use components without importing CSS:
+This gives you access to all Engrate design tokens in your own components:
 
 ```tsx
-import { Button } from 'eg-components'
-
-function App() {
-  return <Button variant="primary">Click me</Button>
+// Your custom component can use Engrate's design tokens
+function CustomCard({ children }) {
+  return (
+    <div className="bg-card border-border text-primary rounded-lg p-4">
+      {children}
+    </div>
+  )
 }
 ```
 
+### Available Design Tokens
+
+The library provides the following CSS custom properties:
+
+**Colors:**
+
+- `sunflower`, `sunflower-hover` - Primary brand color
+- `primary`, `secondary`, `tertiary` - Text colors
+- `main`, `alt`, `card`, `contrast` - Background colors
+- `border` - Border color
+- `error` - Error state color
+
+**Typography:**
+
+- `font-display` - Libre Baskerville (headings)
+- `font-sans` - Work Sans (body text)
+- `font-mono` - IBM Plex Mono (code)
+
 ## Development
 
 ### Setup
@@ -89,17 +101,16 @@ npm install
 ```
 src/
 ├── components/
-│   ├── ui/           # Base UI components (Button, etc.)
-│   └── layout/       # Layout components
+│   ├── ui/             # Base UI components (Button, etc.)
+│   └── layout/         # Layout components
 ├── lib/
-│   └── utils.ts      # Utility functions (cn, etc.)
+│   └── utils.ts        # Utility functions (cn, etc.)
 ├── styles/
-│   ├── fonts.css     # @font-face declarations
-│   └── index.css     # Tailwind entry point
+│   ├── fonts.css       # @font-face declarations
+│   └── index.css       # Tailwind v4 with @theme tokens
 ├── test/
-│   └── setup.ts      # Test configuration
-├── tailwind.preset.ts # Exportable design tokens
-└── index.ts          # Main entry point
+│   └── setup.ts        # Test configuration
+└── index.ts            # Main entry point
 ```
 
 ### Adding a Component
@@ -142,6 +153,14 @@ This library follows Engrate's brand guidelines:
 - **No bold fonts**: Use Regular weight only (Medium for emphasis)
 - **Left-aligned text**: Default alignment
 
+## Publishing to NPM
+
+Make sure you have access to the @engrate org in NPM and then run:
+
+```
+npm publish --access public
+```
+
 ## License
 
 MIT License