Skip to content

Commit 2ff0e6e

Browse files
maiieulmaiieul
committed
docs(styled): update installation instructions
1 parent fae8253 commit 2ff0e6e

File tree

1 file changed

+164
-96
lines changed
  • apps/website/src/routes/docs/styled/(getting-started)/install

1 file changed

+164
-96
lines changed

‎apps/website/src/routes/docs/styled/(getting-started)/install/index.mdx‎

Lines changed: 164 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -4,144 +4,212 @@ title: 'Qwik UI | Styled Kit - Installation'
44

55
# Using the Styled Kit
66

7-
## Step 1: Install the Headless Kit
7+
## CLI
88

9-
To get started with the Styled Kit for Qwik UI, you first need to install the headless package and qwikest icons:
9+
## Step 0: Skip everthing below, just use the cli 🚀
1010

11-
```tsx
12-
pnpm i -D @qwik-ui/headless @qwikest/icons
13-
```
11+
Simply run the following command:
1412

15-
## Step 2: Add CSS variables
16-
17-
Then you need to add the CSS variables to your root CSS file:
18-
19-
```css
20-
@layer base {
21-
:root {
22-
--color-background: 0 0% 100%;
23-
--color-foreground: 263 84% 5%;
24-
25-
--color-primary: 263 56% 52%;
26-
--color-primary-foreground: 0 0% 100%;
27-
28-
--color-secondary: 202 91% 52%;
29-
--color-secondary-foreground: 0 0% 100%;
30-
31-
--color-muted: 210 40% 96%;
32-
--color-muted-foreground: 263 16% 47%;
13+
```zsh
14+
npx qwik-ui init
15+
```
3316

34-
--color-accent: 0 0% 89%;
35-
--color-accent-foreground: 263 47% 11%;
17+
## Manual installation
3618

37-
--color-destructive: 0 84% 60%;
38-
--color-destructive-foreground: 263 0% 100%;
19+
### Step 1: Install the Headless Kit and qwikest icons
3920

40-
--color-card: 0 0% 100%;
41-
--color-card-foreground: 263 84% 5%;
21+
To get started with the Styled Kit for Qwik UI, you first need to install the headless package and qwikest icons:
4222

43-
--color-popover: 0 0% 100%;
44-
--color-popover-foreground: 263 84% 5%;
23+
```zsh
24+
pnpm i -D @qwik-ui/headless @qwikest/icons
25+
```
4526

46-
--color-border: 263 32% 91%;
27+
### Step 2: copy/paste your theme config
4728

48-
--color-input: 263 32% 91%;
29+
Click on "make it yours" -> choose your favorite color theme and style -> copy/paste the css-variables config to your global css file.
4930

50-
--color-ring: 263 18% 61%;
31+
For example, we use the following config by default on the Qwik UI docs:
5132

52-
--border-radius: 0.375rem;
33+
```css
34+
@layer base {
35+
:root {
36+
--background: 0 0% 100%;
37+
--foreground: 222.2 47.4% 11.2%;
38+
--muted: 210 40% 96.1%;
39+
--muted-foreground: 215.4 16.3% 46.9%;
40+
--popover: 0 0% 100%;
41+
--popover-foreground: 222.2 47.4% 11.2%;
42+
--card: 0 0% 100%;
43+
--card-foreground: 222.2 47.4% 11.2%;
44+
--border: 214.3 31.8% 91.4%;
45+
--input: 214.3 31.8% 91.4%;
46+
--primary: 191.6 91.4% 36.5%;
47+
--primary-foreground: 0 0% 100%;
48+
--secondary: 214.3 31.8% 91.4%;
49+
--secondary-foreground: 0 0% 0%;
50+
--accent: 210 40% 96.1%;
51+
--accent-foreground: 222.2 47.4% 11.2%;
52+
--alert: 0 84.2% 60.2%;
53+
--alert-foreground: 210 40% 98%;
54+
--ring: 222.2 47.4% 11.2%;
55+
--border-width: 0px;
56+
--border-radius: 0;
57+
--shadow-base: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
58+
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
59+
--shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0px rgba(0, 0, 0, 0.1);
60+
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
61+
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
62+
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
63+
--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 1);
64+
--shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.01);
65+
--transform-press: scale(0.95);
5366
}
54-
5567
.dark {
56-
--color-background: 222 47% 11%;
57-
--color-foreground: 263 40% 98%;
58-
59-
--color-primary: 263 70% 58%;
60-
--color-primary-foreground: 190 40% 98%;
61-
62-
--color-secondary: 202 97% 55%;
63-
--color-secondary-foreground: 190 40% 98%;
64-
65-
--color-muted: 218 32.6% 17.5%;
66-
--color-muted-foreground: 263 20.2% 65.1%;
67-
68-
--color-accent: 0 0% 23%;
69-
--color-accent-foreground: 263 40% 98%;
70-
71-
--color-destructive: 0 70% 40%;
72-
--color-destructive-foreground: 263 40% 98%;
73-
74-
--color-card: 263 84% 4.9%;
75-
--color-card-foreground: 263 40% 98%;
76-
77-
--color-popover: 263 84% 4.9%;
78-
--color-popover-foreground: 263 40% 98%;
79-
80-
--color-border: 263 32.6% 17.5%;
81-
82-
--color-input: 263 32.6% 17.5%;
83-
84-
--color-ring: 263 26.8% 83.9%;
68+
--background: 222.2 84% 4.9%;
69+
--foreground: 210 40% 98%;
70+
--muted: 217.2 32.6% 17.5%;
71+
--muted-foreground: 215 20.2% 65.1%;
72+
--popover: 222.2 84% 4.9%;
73+
--popover-foreground: 210 40% 98%;
74+
--card: 222.2 84% 4.9%;
75+
--card-foreground: 210 40% 98%;
76+
--border: 217.2 32.6% 17.5%;
77+
--input: 217.2 32.6% 17.5%;
78+
--primary: 191.6 91.4% 36.5%;
79+
--primary-foreground: 0 0% 100%;
80+
--secondary: 214.3 31.8% 91.4%;
81+
--secondary-foreground: 0 0% 0%;
82+
--accent: 217.2 32.6% 17.5%;
83+
--accent-foreground: 210 40% 98%;
84+
--alert: 0 84.2% 60.2%;
85+
--alert-foreground: 210 40% 98%;
86+
--ring: 212.7 26.8% 83.9;
87+
--border-width: 0px;
88+
--border-radius: 0;
89+
--shadow-base: 0 1px 2px 0 rgba(0, 0, 0, 0.01);
90+
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
91+
--shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0px rgba(0, 0, 0, 0.1);
92+
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
93+
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
94+
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
95+
--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 1);
96+
--shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.01);
97+
--transform-press: scale(0.95);
8598
}
8699
}
87100
```
88101

89-
## Step 3: Modify your tailwind.config.js file
102+
### Step 3: Modify your tailwind.config.js file
90103

91104
Finally, you need to modify your `tailwind.config.js` file:
92105

93106
```tsx
94-
/** @type {import('tailwindcss').Config} */
107+
const plugin = require('tailwindcss/plugin');
108+
109+
const { join } = require('path');
95110

111+
/** @type {import('tailwindcss').Config} */
96112
module.exports = {
113+
plugins: [
114+
plugin(function ({ addUtilities }) {
115+
addUtilities({
116+
'.press': {
117+
transform: 'var(--transform-press)',
118+
},
119+
'.appear': {
120+
opacity: 1,
121+
},
122+
'.disappear': {
123+
opacity: 0,
124+
},
125+
});
126+
}),
127+
],
128+
129+
content: [join(__dirname, 'src/**/*.{js,ts,jsx,tsx,mdx}')],
97130
darkMode: 'class',
98131
theme: {
132+
screens: {
133+
sm: '640px',
134+
md: '768px',
135+
lg: '1024px',
136+
xl: '1280px',
137+
'2xl': '1536px',
138+
},
139+
important: true,
99140
extend: {
100141
colors: {
101-
border: 'hsl(var(--color-border) / <alpha-value>)',
102-
input: 'hsl(var(--color-input) / <alpha-value>)',
103-
ring: 'hsl(var(--color-ring) / <alpha-value>)',
104-
background: 'hsl(var(--color-background) / <alpha-value>)',
105-
foreground: 'hsl(var(--color-foreground) / <alpha-value>)',
106-
142+
border: 'hsl(var(--border))',
143+
input: 'hsl(var(--input))',
144+
ring: 'hsl(var(--ring))',
145+
background: 'hsl(var(--background))',
146+
foreground: 'hsl(var(--foreground))',
107147
primary: {
108-
DEFAULT: 'hsl(var(--color-primary) / <alpha-value>)',
109-
foreground: 'hsl(var(--color-primary-foreground) / <alpha-value>)',
148+
DEFAULT: 'hsl(var(--primary))',
149+
foreground: 'hsl(var(--primary-foreground))',
110150
},
111151
secondary: {
112-
DEFAULT: 'hsl(var(--color-secondary) / <alpha-value>)',
113-
foreground: 'hsl(var(--color-secondary-foreground) / <alpha-value>)',
152+
DEFAULT: 'hsl(var(--secondary))',
153+
foreground: 'hsl(var(--secondary-foreground))',
114154
},
115-
accent: {
116-
DEFAULT: 'hsl(var(--color-accent) / <alpha-value>)',
117-
foreground: 'hsl(var(--color-accent-foreground) / <alpha-value>)',
155+
alert: {
156+
DEFAULT: 'hsl(var(--alert))',
157+
foreground: 'hsl(var(--alert-foreground))',
118158
},
119159
muted: {
120-
DEFAULT: 'hsl(var(--color-muted) / <alpha-value>)',
121-
foreground: 'hsl(var(--color-muted-foreground) / <alpha-value>)',
122-
},
123-
destructive: {
124-
DEFAULT: 'hsl(var(--color-destructive) / <alpha-value>)',
125-
foreground: 'hsl(var(--color-destructive-foreground) / <alpha-value>)',
160+
DEFAULT: 'hsl(var(--muted))',
161+
foreground: 'hsl(var(--muted-foreground))',
126162
},
127-
popover: {
128-
DEFAULT: 'hsl(var(--color-popover) / <alpha-value>)',
129-
foreground: 'hsl(var(--color-popover-foreground) / <alpha-value>)',
163+
accent: {
164+
DEFAULT: 'hsl(var(--accent))',
165+
foreground: 'hsl(var(--accent-foreground))',
130166
},
131167
card: {
132-
DEFAULT: 'hsl(var(--color-card) / <alpha-value>)',
133-
foreground: 'hsl(var(--color-card-foreground) / <alpha-value>)',
168+
DEFAULT: 'hsl(var(--card))',
169+
foreground: 'hsl(var(--card-foreground))',
170+
},
171+
popover: {
172+
DEFAULT: 'hsl(var(--popover))',
173+
foreground: 'hsl(var(--popover-foreground))',
134174
},
135175
},
136176
borderRadius: {
137-
lg: 'var(--border-radius)',
138-
md: 'calc(var(--border-radius) - 2px)',
139-
sm: 'calc(var(--border-radius) - 4px)',
177+
base: 'var(--border-radius)',
178+
sm: 'calc(var(--border-radius) + 0.125rem)',
179+
DEFAULT: 'calc(var(--border-radius) + 0.25rem)',
180+
md: 'calc(var(--border-radius) + 0.375rem)',
181+
lg: 'calc(var(--border-radius) + 0.5rem)',
182+
xl: 'calc(var(--border-radius) + 0.75rem)',
183+
'2xl': 'calc(var(--border-radius) + 1rem)',
184+
'3xl': 'calc(var(--border-radius) + 1.5rem)',
185+
},
186+
borderWidth: {
187+
base: 'var(--border-width)',
188+
DEFAULT: 'calc(var(--border-width) + 1px)',
189+
2: 'calc(var(--border-width) + 2px)',
190+
4: 'calc(var(--border-width) + 4px)',
191+
8: 'calc(var(--border-width) + 8px)',
192+
},
193+
boxShadow: {
194+
base: 'var(--shadow-base)',
195+
sm: 'var(--shadow-sm)',
196+
DEFAULT: 'var(--shadow)',
197+
md: 'var(--shadow-md)',
198+
lg: 'var(--shadow-lg)',
199+
xl: 'var(--shadow-xl)',
200+
'2xl': 'var(--shadow-2xl)',
201+
inner: 'var(--shadow-inner)',
202+
},
203+
fontFamily: {
204+
sans: ['Inter Variable', 'sans-serif'],
140205
},
141206
},
142207
},
143208
};
144209
```
145210

146-
Now you can start building beautiful Qwik websites.
147-
Choose from each of the ready made components and read their installation instructions.
211+
This might seem like a lot of configuration, but we believe it to be worth it as it is what allows changing styles and themes at the click of a button.
212+
213+
### Step 4: Find the components you need in the docs and copy/paste them into your project
214+
215+
You will find the components code in their corresponding link in the docs.

0 commit comments

Comments
 (0)