shadcn-glass-ui 2.1.1 → 2.1.4
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.
- package/CHANGELOG.md +18 -0
- package/README.md +80 -325
- package/dist/cli/index.cjs +1 -1
- package/dist/components.cjs +4 -4
- package/dist/components.js +1 -1
- package/dist/hooks.cjs +2 -2
- package/dist/index.cjs +1659 -5
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +1651 -4
- package/dist/index.js.map +1 -1
- package/dist/r/registry.json +36 -0
- package/dist/r/sidebar-context.json +35 -0
- package/dist/r/sidebar-glass.json +40 -0
- package/dist/r/sidebar-menu.json +39 -0
- package/dist/r/split-layout-accordion.json +24 -0
- package/dist/r/split-layout-context.json +21 -0
- package/dist/r/split-layout-glass.json +25 -0
- package/dist/shadcn-glass-ui.css +1 -1
- package/dist/{theme-context-BHXYJ4RE.cjs → theme-context-Y98bGvcm.cjs} +2 -2
- package/dist/{theme-context-BHXYJ4RE.cjs.map → theme-context-Y98bGvcm.cjs.map} +1 -1
- package/dist/themes.cjs +1 -1
- package/dist/{trust-score-card-glass-CGXmOIfq.cjs → trust-score-card-glass-2rjz00d_.cjs} +47 -5
- package/dist/trust-score-card-glass-2rjz00d_.cjs.map +1 -0
- package/dist/{trust-score-card-glass-L9g0qamo.js → trust-score-card-glass-zjkx4OC2.js} +3 -3
- package/dist/trust-score-card-glass-zjkx4OC2.js.map +1 -0
- package/dist/{use-focus-CeNHOiBa.cjs → use-focus-DbpBEuee.cjs} +2 -2
- package/dist/{use-focus-CeNHOiBa.cjs.map → use-focus-DbpBEuee.cjs.map} +1 -1
- package/dist/{use-wallpaper-tint-Bt2G3g1v.cjs → use-wallpaper-tint-DbawS9zh.cjs} +2 -2
- package/dist/{use-wallpaper-tint-Bt2G3g1v.cjs.map → use-wallpaper-tint-DbawS9zh.cjs.map} +1 -1
- package/dist/{utils-LYxxWvUn.cjs → utils-XlyXIhuP.cjs} +2 -2
- package/dist/{utils-LYxxWvUn.cjs.map → utils-XlyXIhuP.cjs.map} +1 -1
- package/dist/utils.cjs +1 -1
- package/docs/GETTING_STARTED.md +3 -3
- package/docs/components/SPLIT_LAYOUT_GLASS.md +607 -0
- package/package.json +1 -2
- package/dist/trust-score-card-glass-CGXmOIfq.cjs.map +0 -1
- package/dist/trust-score-card-glass-L9g0qamo.js.map +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,24 @@ All notable changes to this project will be documented in this file.
|
|
|
5
5
|
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project
|
|
6
6
|
adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
|
7
7
|
|
|
8
|
+
## [2.1.1] - 2025-12-14
|
|
9
|
+
|
|
10
|
+
### 🐛 Bug Fixes
|
|
11
|
+
|
|
12
|
+
#### CI/CD Improvements
|
|
13
|
+
|
|
14
|
+
- **GitHub Packages Publishing** - Fixed publication to GitHub Packages registry
|
|
15
|
+
- Added `--ignore-scripts` flag to skip `prepublishOnly` hook during GitHub Packages publish
|
|
16
|
+
- Reuses build artifacts from npm publish step instead of rebuilding
|
|
17
|
+
- Prevents API Extractor scope validation error with `@Yhooi2` (uppercase scope)
|
|
18
|
+
- Added graceful handling for `package.json.bak` restore step
|
|
19
|
+
|
|
20
|
+
### 📦 Published Packages
|
|
21
|
+
|
|
22
|
+
- **npm Registry**: [shadcn-glass-ui@2.1.1](https://www.npmjs.com/package/shadcn-glass-ui/v/2.1.1)
|
|
23
|
+
- **GitHub Packages**:
|
|
24
|
+
[@Yhooi2/shadcn-glass-ui@2.1.1](https://github.com/Yhooi2/shadcn-glass-ui-library/packages)
|
|
25
|
+
|
|
8
26
|
## [2.1.0] - 2025-12-14
|
|
9
27
|
|
|
10
28
|
### 🎉 Complete v2.0.0 Migration Applied
|
package/README.md
CHANGED
|
@@ -3,84 +3,42 @@
|
|
|
3
3
|
[](https://www.npmjs.com/package/shadcn-glass-ui)
|
|
4
4
|
[](https://www.npmjs.com/package/shadcn-glass-ui)
|
|
5
5
|
[](https://www.typescriptlang.org/)
|
|
6
|
-
[](docs/AI_USAGE.md)
|
|
7
6
|
[](https://bundlephobia.com/package/shadcn-glass-ui)
|
|
7
|
+
[](docs/AI_USAGE.md)
|
|
8
8
|
|
|
9
|
-
**Glassmorphism
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
**[Live Demo](https://yhooi2.github.io/shadcn-glass-ui-library/)** |
|
|
13
|
-
**[Interactive Storybook](https://yhooi2.github.io/shadcn-glass-ui-library/)** |
|
|
14
|
-
**[npm Package](https://www.npmjs.com/package/shadcn-glass-ui)**
|
|
9
|
+
**Glassmorphism components for React** — drop-in compatible with shadcn/ui. 57 components, 3 themes,
|
|
10
|
+
zero migration.
|
|
15
11
|
|
|
16
12
|
<div align="center">
|
|
17
|
-
<img src="https://yhooi2.github.io/shadcn-glass-ui-library/demo-screenshot.png" alt="shadcn-glass-ui Demo
|
|
18
|
-
<
|
|
13
|
+
<img src="https://yhooi2.github.io/shadcn-glass-ui-library/demo-screenshot.png" alt="shadcn-glass-ui Demo" width="100%" />
|
|
14
|
+
<br />
|
|
15
|
+
<a href="https://yhooi2.github.io/shadcn-glass-ui-library/"><strong>Live Demo</strong></a> ·
|
|
16
|
+
<a href="https://www.npmjs.com/package/shadcn-glass-ui"><strong>npm</strong></a> ·
|
|
17
|
+
<a href="docs/GETTING_STARTED.md"><strong>Docs</strong></a>
|
|
19
18
|
</div>
|
|
20
19
|
|
|
21
20
|
---
|
|
22
21
|
|
|
23
|
-
## Why shadcn-glass-ui?
|
|
24
|
-
|
|
25
|
-
| Feature | shadcn-glass-ui | Standard shadcn/ui |
|
|
26
|
-
| -------------------- | ------------------------------------ | ------------------- |
|
|
27
|
-
| **Themes** | 3 built-in (Glass/Light/Aurora) | 1 base theme |
|
|
28
|
-
| **Glass Effects** | Native blur, glow, transparency | Manual CSS required |
|
|
29
|
-
| **AI Documentation** | Optimized for Claude, Copilot, GPT | Basic docs |
|
|
30
|
-
| **Components** | 57 specialized glassmorphism | ~40 base components |
|
|
31
|
-
| **Token System** | 225 OKLCH primitives, zero hardcoded | CSS variables |
|
|
32
|
-
| **Accessibility** | WCAG 2.1 AA + 44px touch targets | Basic a11y |
|
|
33
|
-
|
|
34
|
-
**Key advantages:**
|
|
35
|
-
|
|
36
|
-
- Works alongside existing shadcn/ui components — same patterns, same CLI
|
|
37
|
-
- AI-first documentation with decision trees and Context7 integration
|
|
38
|
-
- 1,500+ tests (visual regression, compliance, unit)
|
|
39
|
-
- 3-layer token system with zero hardcoded values
|
|
40
|
-
|
|
41
|
-
---
|
|
42
|
-
|
|
43
22
|
## Quick Start
|
|
44
23
|
|
|
45
|
-
**Requirements:** React 18+, Tailwind CSS 4.1+
|
|
46
|
-
|
|
47
|
-
### Install
|
|
48
|
-
|
|
49
24
|
```bash
|
|
50
25
|
npm install shadcn-glass-ui
|
|
51
26
|
```
|
|
52
27
|
|
|
53
|
-
### Use
|
|
54
|
-
|
|
55
28
|
```tsx
|
|
56
|
-
import { ButtonGlass,
|
|
29
|
+
import { ButtonGlass, ThemeProvider } from 'shadcn-glass-ui';
|
|
57
30
|
import 'shadcn-glass-ui/dist/styles.css';
|
|
58
31
|
|
|
59
|
-
function App() {
|
|
32
|
+
export default function App() {
|
|
60
33
|
return (
|
|
61
34
|
<ThemeProvider defaultTheme="glass">
|
|
62
|
-
<
|
|
63
|
-
<ButtonGlass variant="default" size="lg">
|
|
64
|
-
Click me
|
|
65
|
-
</ButtonGlass>
|
|
66
|
-
<InputGlass placeholder="Enter text..." />
|
|
67
|
-
</div>
|
|
35
|
+
<ButtonGlass variant="default">Click me</ButtonGlass>
|
|
68
36
|
</ThemeProvider>
|
|
69
37
|
);
|
|
70
38
|
}
|
|
71
39
|
```
|
|
72
40
|
|
|
73
|
-
**
|
|
74
|
-
|
|
75
|
-
---
|
|
76
|
-
|
|
77
|
-
## Installation Methods
|
|
78
|
-
|
|
79
|
-
### Option 1: shadcn CLI (Recommended)
|
|
80
|
-
|
|
81
|
-
Listed on [registry.directory](https://registry.directory)!
|
|
82
|
-
|
|
83
|
-
Add to `components.json`:
|
|
41
|
+
**Or via shadcn CLI** — add to `components.json`:
|
|
84
42
|
|
|
85
43
|
```json
|
|
86
44
|
{
|
|
@@ -92,332 +50,129 @@ Add to `components.json`:
|
|
|
92
50
|
}
|
|
93
51
|
```
|
|
94
52
|
|
|
95
|
-
Install components:
|
|
96
|
-
|
|
97
|
-
```bash
|
|
98
|
-
npx shadcn@latest add @shadcn-glass-ui/button-glass @shadcn-glass-ui/input-glass
|
|
99
|
-
```
|
|
100
|
-
|
|
101
|
-
**[Registry Documentation →](docs/REGISTRY_USAGE.md)**
|
|
102
|
-
|
|
103
|
-
### Option 2: npm Package
|
|
104
|
-
|
|
105
53
|
```bash
|
|
106
|
-
|
|
54
|
+
npx shadcn@latest add @shadcn-glass-ui/button-glass
|
|
107
55
|
```
|
|
108
56
|
|
|
109
|
-
**[npm Installation Guide →](docs/GETTING_STARTED.md)**
|
|
110
|
-
|
|
111
57
|
---
|
|
112
58
|
|
|
113
|
-
##
|
|
114
|
-
|
|
115
|
-
| Category | Count | Examples |
|
|
116
|
-
| --------------- | ----- | ------------------------------------------------------------- |
|
|
117
|
-
| **Core UI** | 18 | ButtonGlass, InputGlass, ModalGlass, TabsGlass, CheckboxGlass |
|
|
118
|
-
| **Atomic** | 7 | SearchBoxGlass, ThemeToggleGlass, IconButtonGlass |
|
|
119
|
-
| **Composite** | 13 | MetricCardGlass, AICardGlass, YearCardGlass |
|
|
120
|
-
| **Sections** | 7 | HeaderNavGlass, ProfileHeaderGlass, CareerStatsGlass |
|
|
121
|
-
| **Specialized** | 10 | SparklineGlass, StepperGlass, RainbowProgressGlass |
|
|
122
|
-
| **Primitives** | 3 | TouchTarget, FormFieldWrapper, InteractiveCard |
|
|
123
|
-
|
|
124
|
-
<details>
|
|
125
|
-
<summary><strong>Core UI (18)</strong> — Essential building blocks</summary>
|
|
126
|
-
|
|
127
|
-
ButtonGlass, InputGlass, CheckboxGlass, ToggleGlass, SliderGlass, ModalGlass, TabsGlass,
|
|
128
|
-
DropdownGlass, TooltipGlass, AlertGlass, NotificationGlass, BadgeGlass, AvatarGlass, GlassCard,
|
|
129
|
-
ProgressGlass, CircularProgressGlass, SkeletonGlass, ComboBoxGlass
|
|
130
|
-
|
|
131
|
-
</details>
|
|
132
|
-
|
|
133
|
-
<details>
|
|
134
|
-
<summary><strong>Atomic (7)</strong> — Single-purpose components</summary>
|
|
135
|
-
|
|
136
|
-
IconButtonGlass, ThemeToggleGlass, SearchBoxGlass, SortDropdownGlass, StatItemGlass,
|
|
137
|
-
ExpandableHeaderGlass, InsightCardGlass
|
|
138
|
-
|
|
139
|
-
</details>
|
|
140
|
-
|
|
141
|
-
<details>
|
|
142
|
-
<summary><strong>Composite (13)</strong> — Pre-built complex widgets</summary>
|
|
143
|
-
|
|
144
|
-
MetricCardGlass, YearCardGlass, AICardGlass, RepositoryCardGlass, TrustScoreDisplayGlass,
|
|
145
|
-
CircularMetricGlass, UserStatsLineGlass, UserInfoGlass, CareerStatsHeaderGlass,
|
|
146
|
-
ContributionMetricsGlass, MetricsGridGlass, RepositoryHeaderGlass, RepositoryMetadataGlass
|
|
147
|
-
|
|
148
|
-
</details>
|
|
149
|
-
|
|
150
|
-
<details>
|
|
151
|
-
<summary><strong>Sections (7)</strong> — Full page sections</summary>
|
|
152
|
-
|
|
153
|
-
HeaderNavGlass, ProfileHeaderGlass, CareerStatsGlass, FlagsSectionGlass, TrustScoreCardGlass,
|
|
154
|
-
ProjectsListGlass, HeaderBrandingGlass
|
|
155
|
-
|
|
156
|
-
</details>
|
|
59
|
+
## Choose Your Path
|
|
157
60
|
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
</details>
|
|
166
|
-
|
|
167
|
-
**[Full Component Catalog →](docs/COMPONENTS_CATALOG.md)** |
|
|
168
|
-
**[Try in Storybook →](https://yhooi2.github.io/shadcn-glass-ui-library/)**
|
|
61
|
+
| Goal | Resource |
|
|
62
|
+
| ----------------------- | -------------------------------------------------------------- |
|
|
63
|
+
| **Get started** | [Getting Started Guide](docs/GETTING_STARTED.md) |
|
|
64
|
+
| **Browse components** | [Storybook](https://yhooi2.github.io/shadcn-glass-ui-library/) |
|
|
65
|
+
| **Use with AI** | [AI Usage Guide](docs/AI_USAGE.md) |
|
|
66
|
+
| **Create custom theme** | [Theme Guide](docs/THEME_CREATION_GUIDE.md) |
|
|
67
|
+
| **Migrate from v1.x** | [Breaking Changes](docs/BREAKING_CHANGES.md) |
|
|
169
68
|
|
|
170
69
|
---
|
|
171
70
|
|
|
172
|
-
##
|
|
71
|
+
## Why shadcn-glass-ui?
|
|
173
72
|
|
|
174
|
-
|
|
73
|
+
| | shadcn-glass-ui | shadcn/ui |
|
|
74
|
+
| ----------------- | ------------------------------- | ------------ |
|
|
75
|
+
| **Themes** | 3 built-in (Glass/Light/Aurora) | 1 base |
|
|
76
|
+
| **Glass effects** | Native blur, glow, transparency | Manual CSS |
|
|
77
|
+
| **Components** | 57 specialized | ~40 base |
|
|
78
|
+
| **Custom theme** | 15 lines CSS | Full rewrite |
|
|
79
|
+
| **AI docs** | Context7, Claude Code, Copilot | Basic |
|
|
175
80
|
|
|
176
|
-
|
|
177
|
-
- **Light** — Clean minimal design with subtle glass effects
|
|
178
|
-
- **Aurora** — Gradient glow with aurora borealis-inspired colors
|
|
81
|
+
**Works alongside shadcn/ui** — same API, same CLI, no migration:
|
|
179
82
|
|
|
180
83
|
```tsx
|
|
181
|
-
import {
|
|
84
|
+
import { Button } from '@/components/ui/button'; // shadcn/ui
|
|
85
|
+
import { ButtonGlass } from '@/components/glass/ui/button-glass'; // Glass variant
|
|
182
86
|
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
return <button onClick={cycleTheme}>Theme: {theme}</button>;
|
|
186
|
-
}
|
|
87
|
+
<Button variant="outline">Standard</Button>
|
|
88
|
+
<ButtonGlass variant="default">Glassmorphism</ButtonGlass>
|
|
187
89
|
```
|
|
188
90
|
|
|
189
|
-
**[Theme Creation Guide →](docs/THEME_CREATION_GUIDE.md)**
|
|
190
|
-
|
|
191
91
|
---
|
|
192
92
|
|
|
193
|
-
##
|
|
194
|
-
|
|
195
|
-
Centralized color management with **zero hardcoded values**.
|
|
196
|
-
|
|
197
|
-
```
|
|
198
|
-
┌─────────────────────────────────────────────────────────────┐
|
|
199
|
-
│ Component Tokens --btn-primary-bg, --modal-surface │
|
|
200
|
-
│ ↓ │
|
|
201
|
-
│ Semantic Tokens --semantic-primary, --semantic-surface │
|
|
202
|
-
│ ↓ │
|
|
203
|
-
│ Primitive Tokens --oklch-purple-500 (225 OKLCH colors) │
|
|
204
|
-
└─────────────────────────────────────────────────────────────┘
|
|
205
|
-
```
|
|
206
|
-
|
|
207
|
-
| Metric | Before (v1.x) | After (v2.0) |
|
|
208
|
-
| ----------------------- | -------------- | -------------------- |
|
|
209
|
-
| Hardcoded OKLCH values | ~280 per theme | **0** |
|
|
210
|
-
| CSS variables per theme | ~85 | **296+ (inherited)** |
|
|
211
|
-
|
|
212
|
-
**How it works:**
|
|
213
|
-
|
|
214
|
-
1. Define ~15 semantic tokens for your theme
|
|
215
|
-
2. 280+ component tokens are inherited automatically
|
|
216
|
-
3. All 57 components update instantly
|
|
93
|
+
## Components
|
|
217
94
|
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
```
|
|
95
|
+
| Category | Count | Examples |
|
|
96
|
+
| --------------- | ----- | -------------------------------------------------- |
|
|
97
|
+
| **Core UI** | 18 | ButtonGlass, InputGlass, ModalGlass, TabsGlass |
|
|
98
|
+
| **Composite** | 14 | MetricCardGlass, SplitLayoutGlass, AICardGlass |
|
|
99
|
+
| **Specialized** | 10 | StepperGlass, SparklineGlass, RainbowProgressGlass |
|
|
100
|
+
| **Sections** | 7 | HeaderNavGlass, ProfileHeaderGlass |
|
|
101
|
+
| **Atomic** | 7 | SearchBoxGlass, ThemeToggleGlass |
|
|
102
|
+
| **Primitives** | 3 | TouchTarget, FormFieldWrapper |
|
|
227
103
|
|
|
228
|
-
**
|
|
229
|
-
**[Theme Creation Guide →](docs/THEME_CREATION_GUIDE.md)**
|
|
104
|
+
[**Browse all 58 components →**](https://yhooi2.github.io/shadcn-glass-ui-library/)
|
|
230
105
|
|
|
231
106
|
---
|
|
232
107
|
|
|
233
|
-
##
|
|
234
|
-
|
|
235
|
-
### 🎉 v2.0.0: 100% API Compatible
|
|
236
|
-
|
|
237
|
-
**Install on top of existing shadcn/ui projects** — no migration required!
|
|
238
|
-
|
|
239
|
-
All components now follow **exact shadcn/ui API conventions**:
|
|
240
|
-
|
|
241
|
-
| Component | shadcn/ui API | shadcn-glass-ui v2.0+ | Status |
|
|
242
|
-
| ----------------- | ---------------------------------- | --------------------- | ------ |
|
|
243
|
-
| **ButtonGlass** | `variant="default"` | ✅ Same | 100% |
|
|
244
|
-
| **ToggleGlass** | `pressed`, `onPressedChange` | ✅ Same | 100% |
|
|
245
|
-
| **SliderGlass** | `value: number[]`, `onValueChange` | ✅ Same | 100% |
|
|
246
|
-
| **ComboBoxGlass** | `value`, `onValueChange` | ✅ Same | 100% |
|
|
247
|
-
|
|
248
|
-
**Key improvements in v2.0:**
|
|
249
|
-
|
|
250
|
-
- `onChange` → `onValueChange` (Select, ComboBox, Slider)
|
|
251
|
-
- `checked` → `pressed` (Toggle components)
|
|
252
|
-
- `variant="default"` → `variant="default"` (Button)
|
|
253
|
-
- Array-based values for Slider (`number[]` instead of `number`)
|
|
108
|
+
## Themes
|
|
254
109
|
|
|
255
|
-
|
|
256
|
-
| ----------------- | ----------------------------------------------- | ----------------------- |
|
|
257
|
-
| CLI installation | `npx shadcn add @shadcn-glass-ui/button-glass` | `npx shadcn add button` |
|
|
258
|
-
| Core props | `variant`, `size`, `className` | Same |
|
|
259
|
-
| Callback names | `onValueChange`, `onPressedChange` | Same |
|
|
260
|
-
| asChild pattern | Full support | Full support |
|
|
261
|
-
| TypeScript | Strict mode | Same |
|
|
262
|
-
| Extended features | `loading`, `icon`, compound APIs, glassmorphism | — |
|
|
110
|
+
Three built-in themes with instant switching:
|
|
263
111
|
|
|
264
|
-
**
|
|
112
|
+
- **Glass** — Dark glassmorphism with purple accents
|
|
113
|
+
- **Light** — Clean minimal with subtle glass
|
|
114
|
+
- **Aurora** — Gradient glow effects
|
|
265
115
|
|
|
266
116
|
```tsx
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
function App() {
|
|
271
|
-
return (
|
|
272
|
-
<>
|
|
273
|
-
<Button variant="outline">Standard</Button>
|
|
274
|
-
<ButtonGlass variant="default">Glassmorphism</ButtonGlass>
|
|
275
|
-
</>
|
|
276
|
-
);
|
|
277
|
-
}
|
|
117
|
+
const { theme, cycleTheme } = useTheme();
|
|
118
|
+
<button onClick={cycleTheme}>Theme: {theme}</button>;
|
|
278
119
|
```
|
|
279
120
|
|
|
280
|
-
**
|
|
281
|
-
|
|
282
|
-
```bash
|
|
283
|
-
# No migration needed - just add to components.json
|
|
284
|
-
npx shadcn@latest add @shadcn-glass-ui/button-glass
|
|
285
|
-
```
|
|
286
|
-
|
|
287
|
-
**[Registry Documentation →](docs/REGISTRY_USAGE.md)**
|
|
121
|
+
**Create custom themes in ~15 lines** — [Theme Guide](docs/THEME_CREATION_GUIDE.md)
|
|
288
122
|
|
|
289
123
|
---
|
|
290
124
|
|
|
291
|
-
## AI-
|
|
292
|
-
|
|
293
|
-
Built for AI coding assistants — Claude, Copilot, GPT understand this library perfectly.
|
|
294
|
-
|
|
295
|
-
| AI Tool | Integration | What it provides |
|
|
296
|
-
| ------------------ | -------------------------------------------------------------- | ------------------------------------------ |
|
|
297
|
-
| **Claude Code** | [CLAUDE.md](CLAUDE.md) | 365-line project context, all patterns |
|
|
298
|
-
| **Context7 MCP** | [Indexed](https://context7.com/yhooi2/shadcn-glass-ui-library) | 41 rules, auto-fetched docs, version-aware |
|
|
299
|
-
| **GitHub Copilot** | TypeScript strict + JSDoc | Accurate completions, type inference |
|
|
300
|
-
| **ChatGPT/GPT-4** | [EXPORTS_MAP.json](docs/EXPORTS_MAP.json) | Machine-readable component registry |
|
|
125
|
+
## AI-Optimized
|
|
301
126
|
|
|
302
|
-
|
|
127
|
+
Built for AI coding assistants:
|
|
303
128
|
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
→ AI generates correct code with all props
|
|
310
|
-
```
|
|
129
|
+
| Tool | Integration |
|
|
130
|
+
| ---------------- | ------------------------------------------------------------------------------ |
|
|
131
|
+
| **Context7 MCP** | [Auto-indexed](https://context7.com/yhooi2/shadcn-glass-ui-library) — 41 rules |
|
|
132
|
+
| **Claude Code** | [CLAUDE.md](CLAUDE.md) — 365 lines of context |
|
|
133
|
+
| **Copilot** | TypeScript strict + JSDoc |
|
|
311
134
|
|
|
312
|
-
**
|
|
313
|
-
recommendations
|
|
135
|
+
[**AI Usage Guide →**](docs/AI_USAGE.md)
|
|
314
136
|
|
|
315
137
|
---
|
|
316
138
|
|
|
317
|
-
##
|
|
139
|
+
## Documentation
|
|
318
140
|
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
141
|
+
| Resource | Description |
|
|
142
|
+
| ------------------------------------------------------------------ | --------------------- |
|
|
143
|
+
| [**Storybook**](https://yhooi2.github.io/shadcn-glass-ui-library/) | Interactive demos |
|
|
144
|
+
| [**Getting Started**](docs/GETTING_STARTED.md) | Installation & setup |
|
|
145
|
+
| [**Component Catalog**](docs/COMPONENTS_CATALOG.md) | All 57 components |
|
|
146
|
+
| [**Theme Guide**](docs/THEME_CREATION_GUIDE.md) | Custom themes |
|
|
147
|
+
| [**Token Architecture**](docs/TOKEN_ARCHITECTURE.md) | 3-layer CSS system |
|
|
148
|
+
| [**AI Usage**](docs/AI_USAGE.md) | Claude, Copilot, GPT |
|
|
149
|
+
| [**Breaking Changes**](docs/BREAKING_CHANGES.md) | v1.x → v2.0 migration |
|
|
324
150
|
|
|
325
151
|
---
|
|
326
152
|
|
|
327
|
-
##
|
|
328
|
-
|
|
329
|
-
<details>
|
|
330
|
-
<summary><strong>How do I migrate from v1.x to v2.0?</strong></summary>
|
|
153
|
+
## Requirements
|
|
331
154
|
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
```bash
|
|
335
|
-
find src/ -type f \( -name "*.tsx" -o -name "*.css" \) -exec sed -i '' \
|
|
336
|
-
-e 's/--metric-emerald-/--metric-success-/g' \
|
|
337
|
-
-e 's/--metric-amber-/--metric-warning-/g' \
|
|
338
|
-
-e 's/--metric-blue-/--metric-default-/g' \
|
|
339
|
-
-e 's/--metric-red-/--metric-destructive-/g' {} +
|
|
340
|
-
```
|
|
341
|
-
|
|
342
|
-
**[Full Migration Guide →](docs/BREAKING_CHANGES.md)**
|
|
343
|
-
|
|
344
|
-
</details>
|
|
345
|
-
|
|
346
|
-
<details>
|
|
347
|
-
<summary><strong>What are the requirements?</strong></summary>
|
|
348
|
-
|
|
349
|
-
- React 18.0+ or 19.0+
|
|
350
|
-
- React-DOM 18.0+ or 19.0+
|
|
155
|
+
- React 18+ or 19+
|
|
351
156
|
- Tailwind CSS 4.1+
|
|
352
157
|
- Node.js 20.16+
|
|
353
158
|
|
|
354
|
-
</details>
|
|
355
|
-
|
|
356
|
-
<details>
|
|
357
|
-
<summary><strong>Where are breaking changes documented?</strong></summary>
|
|
358
|
-
|
|
359
|
-
- **[BREAKING_CHANGES.md](docs/BREAKING_CHANGES.md)** — v1.0 and v2.0 changes
|
|
360
|
-
- **[CHANGELOG.md](CHANGELOG.md)** — Complete version history
|
|
361
|
-
- **[Migration Guides](docs/migration/)** — Step-by-step migration
|
|
362
|
-
|
|
363
|
-
</details>
|
|
364
|
-
|
|
365
|
-
<details>
|
|
366
|
-
<summary><strong>How do I use Compound Components (Modal, Tabs, Stepper)?</strong></summary>
|
|
367
|
-
|
|
368
|
-
```tsx
|
|
369
|
-
<ModalGlass.Root open={open} onOpenChange={setOpen}>
|
|
370
|
-
<ModalGlass.Overlay />
|
|
371
|
-
<ModalGlass.Content>
|
|
372
|
-
<ModalGlass.Header>
|
|
373
|
-
<ModalGlass.Title>Title</ModalGlass.Title>
|
|
374
|
-
<ModalGlass.Close />
|
|
375
|
-
</ModalGlass.Header>
|
|
376
|
-
<ModalGlass.Body>Content</ModalGlass.Body>
|
|
377
|
-
</ModalGlass.Content>
|
|
378
|
-
</ModalGlass.Root>
|
|
379
|
-
```
|
|
380
|
-
|
|
381
|
-
**[Advanced Patterns →](docs/ADVANCED_PATTERNS.md)**
|
|
382
|
-
|
|
383
|
-
</details>
|
|
384
|
-
|
|
385
|
-
---
|
|
386
|
-
|
|
387
|
-
## Documentation
|
|
388
|
-
|
|
389
|
-
| Resource | Description |
|
|
390
|
-
| ------------------------------------------------------------------ | --------------------------- |
|
|
391
|
-
| **[Storybook](https://yhooi2.github.io/shadcn-glass-ui-library/)** | Interactive component demos |
|
|
392
|
-
| **[Getting Started](docs/GETTING_STARTED.md)** | Setup tutorial |
|
|
393
|
-
| **[Component Catalog](docs/COMPONENTS_CATALOG.md)** | All 57 components |
|
|
394
|
-
| **[AI Usage Guide](docs/AI_USAGE.md)** | For Claude, Copilot, GPT |
|
|
395
|
-
| **[Theme Guide](docs/THEME_CREATION_GUIDE.md)** | Create custom themes |
|
|
396
|
-
| **[Token Architecture](docs/TOKEN_ARCHITECTURE.md)** | 3-layer CSS token system |
|
|
397
|
-
| **[Advanced Patterns](docs/ADVANCED_PATTERNS.md)** | asChild, Compound APIs |
|
|
398
|
-
| **[Breaking Changes](docs/BREAKING_CHANGES.md)** | Migration guides |
|
|
399
|
-
|
|
400
159
|
---
|
|
401
160
|
|
|
402
161
|
## Contributing
|
|
403
162
|
|
|
404
|
-
|
|
163
|
+
Contributions welcome! See [CONTRIBUTING.md](CONTRIBUTING.md).
|
|
405
164
|
|
|
406
165
|
## License
|
|
407
166
|
|
|
408
|
-
MIT —
|
|
409
|
-
|
|
410
|
-
## Credits
|
|
411
|
-
|
|
412
|
-
Built with [shadcn/ui](https://ui.shadcn.com/), [Radix UI](https://www.radix-ui.com/),
|
|
413
|
-
[Tailwind CSS](https://tailwindcss.com/), [Vite](https://vitejs.dev/)
|
|
167
|
+
MIT — [LICENSE](LICENSE)
|
|
414
168
|
|
|
415
169
|
---
|
|
416
170
|
|
|
417
171
|
<div align="center">
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
172
|
+
<strong>Built with</strong>
|
|
173
|
+
<a href="https://ui.shadcn.com/">shadcn/ui</a> ·
|
|
174
|
+
<a href="https://www.radix-ui.com/">Radix UI</a> ·
|
|
175
|
+
<a href="https://tailwindcss.com/">Tailwind CSS</a>
|
|
176
|
+
<br /><br />
|
|
177
|
+
<a href="https://github.com/Yhooi2/shadcn-glass-ui-library">Star on GitHub</a> if you find this useful!
|
|
423
178
|
</div>
|
package/dist/cli/index.cjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
#!/usr/bin/env node
|
|
2
|
-
const require_trust_score_card_glass = require("../trust-score-card-glass-
|
|
2
|
+
const require_trust_score_card_glass = require("../trust-score-card-glass-2rjz00d_.cjs");
|
|
3
3
|
let node_util = require("node:util");
|
|
4
4
|
let node_fs = require("node:fs");
|
|
5
5
|
let node_path = require("node:path");
|
package/dist/components.cjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
const require_trust_score_card_glass = require("./trust-score-card-glass-
|
|
2
|
-
require("./utils-
|
|
3
|
-
require("./use-focus-
|
|
4
|
-
require("./theme-context-
|
|
1
|
+
const require_trust_score_card_glass = require("./trust-score-card-glass-2rjz00d_.cjs");
|
|
2
|
+
require("./utils-XlyXIhuP.cjs");
|
|
3
|
+
require("./use-focus-DbpBEuee.cjs");
|
|
4
|
+
require("./theme-context-Y98bGvcm.cjs");
|
|
5
5
|
exports.AICardGlass = require_trust_score_card_glass.AICardGlass;
|
|
6
6
|
exports.AlertGlass = require_trust_score_card_glass.AlertGlass;
|
|
7
7
|
exports.AvatarGlass = require_trust_score_card_glass.AvatarGlass;
|
package/dist/components.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { $ as BaseProgressGlass,
|
|
1
|
+
import { $ as BaseProgressGlass, Dt as NotificationGlass, G as SegmentedControlGlass, K as RainbowProgressGlass, Mt as GlassCard, Pt as DropdownGlass, Q as StatusIndicatorGlass, St as PopoverGlass, X as LanguageBarGlass, Xt as ComboBoxGlass, Y as ProfileAvatarGlass, Z as FlagAlertGlass, _ as ContributionMetricsGlass, _t as SliderGlass, a as HeaderBrandingGlass, an as ButtonGlass, b as AICardGlass, bn as TouchTarget, bt as SkeletonGlass, c as YearCardGlass, ct as ExpandableHeaderGlass, d as TrustScoreDisplayGlass, et as ThemeToggleGlass, f as RepositoryMetadataGlass, g as MetricCardGlass, gt as TabsGlass, h as MetricsGridGlass, hn as AlertGlass, i as HeaderNavGlass, in as CheckboxGlass, jt as InputGlass, kt as ModalGlass, l as UserStatsLineGlass, ln as AvatarGlass, lt as TooltipGlass, m as RepositoryCardGlass, mt as ToggleGlass, n as ProjectsListGlass, nt as SortDropdownGlass, o as FlagsSectionGlass, p as RepositoryHeaderGlass, q as ProgressGlass, r as ProfileHeaderGlass, rn as CircularProgressGlass, rt as SearchBoxGlass, s as CareerStatsGlass, sn as BadgeGlass, st as IconButtonGlass, t as TrustScoreCardGlass, tt as StatItemGlass, u as UserInfoGlass, v as CircularMetricGlass, vn as InteractiveCard, y as CareerStatsHeaderGlass, yn as FormFieldWrapper } from "./trust-score-card-glass-zjkx4OC2.js";
|
|
2
2
|
import "./utils-CcyeqpKQ.js";
|
|
3
3
|
import "./use-focus-CX0TJJIj.js";
|
|
4
4
|
import "./theme-context-_T5r1KG4.js";
|
package/dist/hooks.cjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
const require_use_focus = require("./use-focus-
|
|
2
|
-
const require_use_wallpaper_tint = require("./use-wallpaper-tint-
|
|
1
|
+
const require_use_focus = require("./use-focus-DbpBEuee.cjs");
|
|
2
|
+
const require_use_wallpaper_tint = require("./use-wallpaper-tint-DbawS9zh.cjs");
|
|
3
3
|
exports.useFocus = require_use_focus.useFocus;
|
|
4
4
|
exports.useHover = require_use_focus.useHover;
|
|
5
5
|
exports.useResponsive = require_use_wallpaper_tint.useResponsive;
|