@orion-ds/react 1.2.2 → 1.2.4

package/README.md

@@ -23,31 +23,42 @@ TypeScript-first React component library built on the Orion Design System tokens
 ## Installation
 
 \`\`\`bash
-npm install @orion/react @orion/core
+npm install @orion-ds/react @orion-ds/core
 # or
-pnpm add @orion/react @orion/core
+pnpm add @orion-ds/react @orion-ds/core
 # or
-yarn add @orion/react @orion/core
+yarn add @orion-ds/react @orion-ds/core
 \`\`\`
 
-## Required CSS Imports
+> **Note**: `@orion-ds/core` is a peer dependency that must be installed alongside `@orion-ds/react`.
 
-> **⚠️ IMPORTANT**: Both CSS files are **REQUIRED** for components to render correctly.
+## CSS Setup
+
+### Option 1: Single Import (Recommended)
+
+The simplest approach - one import that includes both design tokens and component styles:
 
 \`\`\`tsx
 // In your app entry file (e.g., main.tsx, App.tsx)
-import '@orion-ds/core/theme.css';       // Design tokens - REQUIRED
-import '@orion-ds/react/dist/react.css'; // Component styles - REQUIRED
+import '@orion-ds/react/styles.css';
+\`\`\`
+
+### Option 2: Separate Imports
+
+If you need more control or are using @orion-ds/core elsewhere:
+
+\`\`\`tsx
+import '@orion-ds/core/theme.css';       // Design tokens
+import '@orion-ds/react/dist/react.css'; // Component styles
 \`\`\`
 
-Missing either import will result in unstyled or broken components. In development, ThemeProvider will warn you if `react.css` is missing.
+> **⚠️ IMPORTANT**: Missing CSS imports will result in unstyled components. In development, ThemeProvider will warn you if styles are missing.
 
 ## Quick Start
 
 \`\`\`tsx
-// 1. Import BOTH CSS files (required!)
-import '@orion-ds/core/theme.css';
-import '@orion-ds/react/dist/react.css';
+// 1. Import styles (pick one option)
+import '@orion-ds/react/styles.css';  // Recommended: single import
 
 // 2. Import components
 import { Button, Card, Field, useTheme, ThemeProvider } from '@orion-ds/react';