@arcadeai/design-system 0.0.0 → 0.0.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 +30 -40
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,21 +1,26 @@
|
|
|
1
|
-
# Arcade
|
|
1
|
+
# Arcade Design System
|
|
2
2
|
|
|
3
|
-
A
|
|
3
|
+
A modern React component library that ensures consistent UI across all our applications, built with TypeScript, Tailwind CSS and shadcn/ui.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## ✨ Features
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
- **🎨 Modern Design**: Clean, professional components following modern design principles
|
|
8
|
+
- **♿ Accessible**: Built on Radix UI primitives for excellent accessibility out of the box
|
|
9
|
+
- **🎯 TypeScript**: Full TypeScript support for better developer experience
|
|
10
|
+
- **🎨 Customizable**: Easy to customize with Tailwind CSS classes
|
|
11
|
+
- **⚡ Lightweight**: Optimized bundle size with tree-shaking support
|
|
12
|
+
- **🔧 Flexible**: Easy to integrate with any React project
|
|
8
13
|
|
|
9
|
-
## Installation
|
|
14
|
+
## 📦 Installation
|
|
10
15
|
|
|
11
16
|
Install the design system as a dependency in your project:
|
|
12
17
|
|
|
13
18
|
```bash
|
|
14
|
-
npm install
|
|
19
|
+
npm install @arcadeai/design-system
|
|
15
20
|
# or
|
|
16
|
-
pnpm add
|
|
21
|
+
pnpm add @arcadeai/design-system
|
|
17
22
|
# or
|
|
18
|
-
yarn add
|
|
23
|
+
yarn add @arcadeai/design-system
|
|
19
24
|
```
|
|
20
25
|
|
|
21
26
|
### Peer Dependencies
|
|
@@ -23,23 +28,24 @@ yarn add arcade-ds
|
|
|
23
28
|
Make sure you have the required peer dependencies installed:
|
|
24
29
|
|
|
25
30
|
```bash
|
|
26
|
-
npm install react react-dom tailwindcss
|
|
31
|
+
npm install react react-dom tailwindcss lucide-react
|
|
27
32
|
```
|
|
28
33
|
|
|
29
|
-
Required versions
|
|
34
|
+
**Required versions:**
|
|
30
35
|
|
|
31
36
|
- React: ^19.1.0
|
|
32
37
|
- React DOM: ^19.1.0
|
|
33
38
|
- Tailwind CSS: ^4.1.10
|
|
39
|
+
- Lucide React: ^0.522.0
|
|
34
40
|
|
|
35
|
-
##
|
|
41
|
+
## 🚀 Quick Start
|
|
36
42
|
|
|
37
43
|
### 1. Import Styles
|
|
38
44
|
|
|
39
45
|
Import the design system styles in your main CSS file or at the root of your application:
|
|
40
46
|
|
|
41
47
|
```css
|
|
42
|
-
@import '
|
|
48
|
+
@import '@arcadeai/design-system/dist/index.css';
|
|
43
49
|
```
|
|
44
50
|
|
|
45
51
|
### 2. Configure Tailwind CSS
|
|
@@ -51,7 +57,7 @@ Ensure your Tailwind CSS configuration is compatible with the design system. The
|
|
|
51
57
|
Import and use components in your React application:
|
|
52
58
|
|
|
53
59
|
```tsx
|
|
54
|
-
import { Button, Card, Input } from '
|
|
60
|
+
import { Button, Card, Input } from '@arcadeai/design-system';
|
|
55
61
|
|
|
56
62
|
function MyApp() {
|
|
57
63
|
return (
|
|
@@ -63,7 +69,7 @@ function MyApp() {
|
|
|
63
69
|
}
|
|
64
70
|
```
|
|
65
71
|
|
|
66
|
-
## Development
|
|
72
|
+
## 🛠️ Development
|
|
67
73
|
|
|
68
74
|
### Prerequisites
|
|
69
75
|
|
|
@@ -76,7 +82,7 @@ function MyApp() {
|
|
|
76
82
|
|
|
77
83
|
```bash
|
|
78
84
|
git clone https://github.com/ArcadeAI/Design-System
|
|
79
|
-
cd design-system
|
|
85
|
+
cd @arcadeai/design-system
|
|
80
86
|
```
|
|
81
87
|
|
|
82
88
|
2. Install dependencies:
|
|
@@ -85,37 +91,23 @@ cd design-system
|
|
|
85
91
|
pnpm install
|
|
86
92
|
```
|
|
87
93
|
|
|
88
|
-
3.
|
|
94
|
+
3. View components in Storybook:
|
|
89
95
|
|
|
90
96
|
```bash
|
|
91
97
|
pnpm dev
|
|
92
98
|
```
|
|
93
99
|
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
```bash
|
|
97
|
-
pnpm storybook
|
|
98
|
-
```
|
|
99
|
-
|
|
100
|
-
### Technology Stack
|
|
100
|
+
## 🏗️ Technology Stack
|
|
101
101
|
|
|
102
102
|
This design system is built on top of:
|
|
103
103
|
|
|
104
|
-
- **shadcn/ui** - A collection of re-usable components built using Radix UI and Tailwind CSS
|
|
105
|
-
- **Radix UI** - Unstyled, accessible components for building high‑quality design systems
|
|
106
|
-
- **Tailwind CSS** - Utility-first CSS framework for rapid UI development
|
|
107
|
-
- **TypeScript** - Type-safe JavaScript for better developer experience
|
|
104
|
+
- **[shadcn/ui](https://ui.shadcn.com/)** - A collection of re-usable components built using Radix UI and Tailwind CSS
|
|
105
|
+
- **[Radix UI](https://www.radix-ui.com/)** - Unstyled, accessible components for building high‑quality design systems
|
|
106
|
+
- **[Tailwind CSS](https://tailwindcss.com/)** - Utility-first CSS framework for rapid UI development
|
|
107
|
+
- **[TypeScript](https://www.typescriptlang.org/)** - Type-safe JavaScript for better developer experience
|
|
108
|
+
- **[Storybook](https://storybook.js.org/)** - Component development and documentation
|
|
108
109
|
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
- `pnpm dev` - Start Vite development server
|
|
112
|
-
- `pnpm build` - Build the library for production
|
|
113
|
-
- `pnpm build:css` - Build CSS with Tailwind
|
|
114
|
-
- `pnpm lint` - Run ESLint
|
|
115
|
-
- `pnpm storybook` - Start Storybook development server
|
|
116
|
-
- `pnpm build-storybook` - Build Storybook for production
|
|
117
|
-
|
|
118
|
-
### Design Tokens
|
|
110
|
+
## 🎨 Design Tokens
|
|
119
111
|
|
|
120
112
|
The design system uses Tailwind CSS for consistent spacing, colors, typography, and other design tokens. When adding new components:
|
|
121
113
|
|
|
@@ -123,6 +115,4 @@ The design system uses Tailwind CSS for consistent spacing, colors, typography,
|
|
|
123
115
|
- Follow the established color palette
|
|
124
116
|
- Maintain consistent spacing and typography scales
|
|
125
117
|
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
Built with ❤️ by the Arcade.dev team
|
|
118
|
+
Built with ❤️ by the Arcade team
|