feat(docs): update README and getting started guide with installation instructions and usage examples

Author: mathieusouflis

README.md

@@ -27,7 +27,7 @@ V14's internal React component library — accessible, headless primitives from
 - Fully typed — strict TypeScript throughout
 - Accessible — ARIA compliance via Ark UI primitives
 - Themeable — all visual variants are PandaCSS `sva()` recipes
-- Tree-shakeable — dual ESM/CJS build, `sideEffects: false`
+- Tree-shakeable JS — dual ESM/CJS build with explicit CSS entrypoints
 
 ---
 
@@ -42,6 +42,37 @@ V14's internal React component library — accessible, headless primitives from
 
 ### Installation
 
+For app usage:
+
+```bash
+npm install @version14/ui
+```
+
+Import the generated component styles once in your app root:
+
+```ts
+import "@version14/ui/styles.css";
+```
+
+If you want the bundled Geist and Nyght font faces, import the font stylesheet too:
+
+```ts
+import "@version14/ui/fonts.css";
+```
+
+For PandaCSS token integration, add the preset to your app's Panda config:
+
+```ts
+import { defineConfig } from "@pandacss/dev";
+import { v14Preset } from "@version14/ui/preset";
+
+export default defineConfig({
+  presets: [v14Preset],
+});
+```
+
+For local component development:
+
 ```bash
 git clone https://github.com/v14/ui.git
 cd ui

docs/getting-started/README.md

@@ -137,3 +137,38 @@ Make sure your IDE uses the project's TypeScript version (not a global one). In
 Confirm the story file ends in `.stories.tsx` — only that extension is picked up.
 
 For other issues, see the [FAQ](../developer-guide/faq.md) or open a Discussion.
+
+---
+
+## Using the Package in an App
+
+Install the package:
+
+```bash
+npm install @version14/ui
+```
+
+Import the generated component CSS once in your app root:
+
+```ts
+import "@version14/ui/styles.css";
+```
+
+Import bundled fonts when you want the default V14 typography assets:
+
+```ts
+import "@version14/ui/fonts.css";
+```
+
+If the app also uses PandaCSS, add the preset for the V14 tokens and semantic colors:
+
+```ts
+import { defineConfig } from "@pandacss/dev";
+import { v14Preset } from "@version14/ui/preset";
+
+export default defineConfig({
+  presets: [v14Preset],
+});
+```
+
+The preset provides tokens. The `styles.css` import provides the component class rules generated from this package's source.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@version14/ui",
-  "version": "0.7.2",
+  "version": "0.7.3",
   "description": "V14 internal UI component library built on Ark UI and PandaCSS",
   "author": "V14",
   "license": "MIT",
@@ -29,6 +29,10 @@
         "default": "./dist/preset.cjs"
       }
     },
+    "./styles.css": {
+      "style": "./dist/styles.css",
+      "default": "./dist/styles.css"
+    },
     "./fonts.css": {
       "style": "./dist/fonts.css",
       "default": "./dist/fonts.css"
@@ -37,7 +41,10 @@
   "files": [
     "dist"
   ],
-  "sideEffects": ["./dist/fonts.css"],
+  "style": "./dist/styles.css",
+  "sideEffects": [
+    "./dist/*.css"
+  ],
   "repository": {
     "type": "git",
     "url": "https://github.com/version14/ui"
@@ -49,7 +56,7 @@
     "node": ">=20"
   },
   "scripts": {
-    "build": "panda codegen && tsup && cp src/fonts.css dist/ && cp -r src/assets dist/",
+    "build": "panda codegen && tsup && panda cssgen './src/**/*.{ts,tsx}' --outfile dist/styles.css --minify && cp src/fonts.css dist/ && cp -r src/assets dist/",
     "dev": "tsup --watch",
     "prepare": "panda codegen && simple-git-hooks",
     "prepublishOnly": "pnpm build && pnpm lint && pnpm check-types && pnpm test",