@srcroot/ui 1.0.1 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +40 -34
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -1,27 +1,23 @@
1
1
  # @srcroot/ui
2
2
 
3
- A UI library with polymorphic, accessible React components for Next.js, Vite, and other React frameworks.
3
+ A lightweight UI library with polymorphic, accessible React components for Next.js, Vite, and other React frameworks.
4
4
 
5
5
  ## Features
6
6
 
7
- - **Framework-Aware**: Automatically detects your framework (Next.js, Vite, etc.) and uses the right component variants
8
- - **Polymorphic**: Most components support an `as` prop (e.g., render a `Button` as an `a` tag)
7
+ - **Framework-Aware**: Automatically detects Next.js or Vite and uses optimized component variants
8
+ - **Polymorphic**: Most components support an `as` prop to change the underlying HTML element
9
9
  - **Accessible**: Built on standard HTML elements and WAI-ARIA patterns
10
10
  - **Copy/Paste**: Components are copied directly into your project — you own the code
11
11
  - **Styled**: Beautiful defaults using Tailwind CSS and `class-variance-authority`
12
- - **Multi-Platform**: Supports npm, Yarn, pnpm, Bun, and Deno
12
+ - **Zero Runtime Dependencies**: No library bundle just copy what you need
13
13
 
14
- ## Quick Start
15
-
16
- ### 1. Initialize
14
+ ## Install
17
15
 
18
16
  ```bash
19
17
  npx @srcroot/ui init
20
18
  ```
21
19
 
22
- This sets up your project with the `cn` utility, theme configuration, and creates the necessary structure.
23
-
24
- ### 2. Add Components
20
+ ## Add Components
25
21
 
26
22
  ```bash
27
23
  # Interactive mode
@@ -34,30 +30,26 @@ npx @srcroot/ui add button card input
34
30
  npx @srcroot/ui add --all
35
31
  ```
36
32
 
37
- Components are installed to `src/components/ui/` (or `components/ui/` depending on your structure).
38
-
39
33
  ## Supported Package Managers
40
34
 
41
35
  The CLI automatically detects and uses your package manager:
42
36
 
43
- - **npm** - `npm install`
44
- - **Yarn** - `yarn add`
45
- - **pnpm** - `pnpm add`
46
- - **Bun** - `bun add`
47
- - **Deno** - `deno add -A`
37
+ | Manager | Command |
38
+ |---------|---------|
39
+ | npm | `npm install` |
40
+ | Yarn | `yarn add` |
41
+ | pnpm | `pnpm add` |
42
+ | Bun | `bun add` |
43
+ | Deno | `deno add -A` |
48
44
 
49
45
  ## Framework Detection
50
46
 
51
- The CLI automatically detects your framework:
52
-
53
47
  | Framework | Detection | Notes |
54
48
  |-----------|-----------|-------|
55
- | Next.js | `next.config.ts/js/mjs` or `src/app` directory | Uses `next/script` for analytics |
49
+ | Next.js | `next.config.ts/js/mjs` or `src/app` | Uses `next/script` for analytics |
56
50
  | Vite | `vite.config.ts/js/mjs` | Uses `useEffect` for analytics, localStorage for themes |
57
51
 
58
- ## Available Components
59
-
60
- Run `npx @srcroot/ui list` to see all available components.
52
+ ## Components
61
53
 
62
54
  ### Analytics
63
55
  - `google-analytics` - Google Analytics 4 integration
@@ -137,7 +129,7 @@ Run `npx @srcroot/ui list` to see all available components.
137
129
  - `chart` - Recharts-based chart component
138
130
  - `map` - Google Maps embed
139
131
  - `combobox` - Searchable dropdown (Command menu pattern)
140
- - `command` - Command menu (Cmdk-style)
132
+ - `command` - Command menu (Cmd+k style)
141
133
  - `file-upload` - Drag-and-drop file upload
142
134
  - `hover-card` - Hover-triggered card
143
135
  - `native-select` - Native select wrapper
@@ -146,6 +138,26 @@ Run `npx @srcroot/ui list` to see all available components.
146
138
  - `whatsapp` - WhatsApp floating button
147
139
  - `floating-dock` - macOS-style floating dock
148
140
 
141
+ ## Usage
142
+
143
+ ```tsx
144
+ import { Button } from "@/components/ui/button"
145
+ import { Card, CardHeader, CardContent } from "@/components/ui/card"
146
+
147
+ export default function Home() {
148
+ return (
149
+ <Card>
150
+ <CardHeader>Welcome</CardHeader>
151
+ <CardContent>
152
+ <Button variant="destructive" onClick={() => alert("Clicked!")}>
153
+ Get Started
154
+ </Button>
155
+ </CardContent>
156
+ </Card>
157
+ )
158
+ }
159
+ ```
160
+
149
161
  ## Polymorphism
150
162
 
151
163
  Components accept an `as` prop to change the underlying HTML element:
@@ -156,21 +168,15 @@ Components accept an `as` prop to change the underlying HTML element:
156
168
  <Text as="h1" variant="h1">Page Title</Text>
157
169
  ```
158
170
 
159
- ## CLI Options
171
+ ## CLI Reference
160
172
 
161
- ```
173
+ ```bash
162
174
  npx @srcroot/ui init Initialize project structure
163
175
  npx @srcroot/ui add [comps] Add component(s)
164
176
  npx @srcroot/ui add --all Add all components
165
177
  npx @srcroot/ui list List available components
166
178
  ```
167
179
 
168
- ## Local Development
169
-
170
- ```bash
171
- cd examples/playground
172
- npm install
173
- npm run dev
174
- ```
180
+ ## License
175
181
 
176
- Visit `http://localhost:3001` to view the component showcase.
182
+ MIT
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@srcroot/ui",
3
- "version": "1.0.1",
3
+ "version": "1.0.2",
4
4
  "description": "A UI library with polymorphic, accessible React components",
5
5
  "author": "Shifaul Islam",
6
6
  "license": "MIT",