@kpv2004/quark-ui 0.1.0 → 0.1.1
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/README.md +122 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
# Quark UI ⚛
|
|
2
|
+
|
|
3
|
+
A modern, high-performance React component library designed with a **dark-first aesthetic**, full **TypeScript support**, and scoped **CSS Modules**. Adaptable to both light and dark themes out of the box.
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/@quark-ui/react)
|
|
6
|
+
[](https://github.com/KPV2004/quark-ui/blob/main/LICENSE)
|
|
7
|
+
|
|
8
|
+
---
|
|
9
|
+
|
|
10
|
+
## Features
|
|
11
|
+
|
|
12
|
+
- 🎨 **Dark-First Design**: Beautiful dark mode defaults with seamless light mode transitions.
|
|
13
|
+
- ⚡ **Zero Runtime CSS Overhead**: Styled using scoped CSS Modules. No heavy CSS-in-JS libraries.
|
|
14
|
+
- 🔒 **Type-Safe**: Written 100% in TypeScript with full autocompletion and type definitions.
|
|
15
|
+
- ♿ **Accessible**: Follows WAI-ARIA standards for keyboard navigation and screen-reader accessibility.
|
|
16
|
+
- 📦 **Feather Icons**: Built-in sleek icons powered by `react-icons/fi`.
|
|
17
|
+
|
|
18
|
+
---
|
|
19
|
+
|
|
20
|
+
## Installation
|
|
21
|
+
|
|
22
|
+
Install Quark UI and its peer dependencies via npm, yarn, or bun:
|
|
23
|
+
|
|
24
|
+
```bash
|
|
25
|
+
# Using bun (recommended)
|
|
26
|
+
bun add @kpv2004/quark-ui
|
|
27
|
+
|
|
28
|
+
# Using npm
|
|
29
|
+
npm install @kpv2004/quark-ui
|
|
30
|
+
|
|
31
|
+
# Using yarn
|
|
32
|
+
yarn add @kpv2004/quark-ui
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
---
|
|
36
|
+
|
|
37
|
+
## Setup & Stylesheets
|
|
38
|
+
|
|
39
|
+
To load the design tokens and base styles, import the stylesheet once at the entry point of your application (e.g., `main.tsx`, `index.tsx`, or `App.tsx`):
|
|
40
|
+
|
|
41
|
+
```tsx
|
|
42
|
+
import '@kpv2004/quark-ui/styles';
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
---
|
|
46
|
+
|
|
47
|
+
## Quick Start
|
|
48
|
+
|
|
49
|
+
Here is a quick example showing how to build a basic user card with Quark UI components:
|
|
50
|
+
|
|
51
|
+
```tsx
|
|
52
|
+
import React from 'react';
|
|
53
|
+
import { Card, Button, Avatar, Badge } from '@kpv2004/quark-ui';
|
|
54
|
+
import '@kpv2004/quark-ui/styles';
|
|
55
|
+
|
|
56
|
+
function App() {
|
|
57
|
+
return (
|
|
58
|
+
<div style={{ padding: '24px', display: 'flex', justifyContent: 'center' }}>
|
|
59
|
+
<Card variant="elevated" padding="lg" hoverable style={{ width: '360px' }}>
|
|
60
|
+
<div style={{ display: 'flex', alignItems: 'center', gap: '16px', marginBottom: '16px' }}>
|
|
61
|
+
<Avatar
|
|
62
|
+
src="https://api.dicebear.com/9.x/avataaars/svg?seed=Felix"
|
|
63
|
+
alt="User avatar"
|
|
64
|
+
size="lg"
|
|
65
|
+
status="online"
|
|
66
|
+
/>
|
|
67
|
+
<div>
|
|
68
|
+
<h3 style={{ margin: 0, color: 'var(--qk-text-1)' }}>Pannet V.</h3>
|
|
69
|
+
<Badge variant="primary" size="sm" style={{ marginTop: '4px' }}>Lead Developer</Badge>
|
|
70
|
+
</div>
|
|
71
|
+
</div>
|
|
72
|
+
|
|
73
|
+
<p style={{ color: 'var(--qk-text-2)', fontSize: '14px', lineHeight: 1.6, marginBottom: '20px' }}>
|
|
74
|
+
Building high-performance design systems using React, TypeScript, and CSS Modules.
|
|
75
|
+
</p>
|
|
76
|
+
|
|
77
|
+
<div style={{ display: 'flex', gap: '10px' }}>
|
|
78
|
+
<Button variant="primary" size="sm" fullWidth>Follow</Button>
|
|
79
|
+
<Button variant="secondary" size="sm" fullWidth>Message</Button>
|
|
80
|
+
</div>
|
|
81
|
+
</Card>
|
|
82
|
+
</div>
|
|
83
|
+
);
|
|
84
|
+
}
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
---
|
|
88
|
+
|
|
89
|
+
## Light & Dark Theme Toggle
|
|
90
|
+
|
|
91
|
+
Quark UI features native support for light and dark theme switching. By default, the library applies dark theme values.
|
|
92
|
+
|
|
93
|
+
To toggle the **Light Theme**, simply add the `data-theme="light"` attribute to your root element (typically `<html>`):
|
|
94
|
+
|
|
95
|
+
```javascript
|
|
96
|
+
// Toggle to Light Theme
|
|
97
|
+
document.documentElement.setAttribute('data-theme', 'light');
|
|
98
|
+
|
|
99
|
+
// Toggle back to Dark Theme
|
|
100
|
+
document.documentElement.setAttribute('data-theme', 'dark');
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
---
|
|
104
|
+
|
|
105
|
+
## Components Included
|
|
106
|
+
|
|
107
|
+
| Component | Description |
|
|
108
|
+
| :--- | :--- |
|
|
109
|
+
| **`Button`** | Standard actions with primary, secondary, outline, ghost, loading, and icon options. |
|
|
110
|
+
| **`Card`** | Flex-padded container with default, outlined, elevated, and glassmorphism styles. |
|
|
111
|
+
| **`Input`** | Form fields with active labels, custom states, helper texts, validation errors, and prefix icons. |
|
|
112
|
+
| **`Toggle`** | Animated switch toggler supporting multiple sizes and disabled options. |
|
|
113
|
+
| **`Badge`** | Category/tag labels with various status colors (primary, success, warning, danger, info) and dot indicators. |
|
|
114
|
+
| **`Alert`** | Contextual notifications supporting dynamic feedback layouts and closing options. |
|
|
115
|
+
| **`Avatar`** | User avatar bubble supporting fallback initials, images, and live status dots. |
|
|
116
|
+
| **`Spinner`** | Minimalist customizable loading indicators. |
|
|
117
|
+
|
|
118
|
+
---
|
|
119
|
+
|
|
120
|
+
## License
|
|
121
|
+
|
|
122
|
+
This project is licensed under the [MIT License](https://github.com/KPV2004/quark-ui/blob/main/LICENSE) - see the LICENSE file for details.
|