You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
A fully customizable design system of copy-paste, reusable, styled components built on
11
-
top of headless.
12
-
</div>
9
+
Inspired by [Shadcn UI](https://ui.shadcn.com/), the styled kit is an innovative collection of pre-designed, fully customizable, and easy-to-reuse copy-paste components built with [Tailwind](https://tailwindcss.com), [cva](https://cva.style/docs) and css variables on top of the Qwik UI headless components.
13
10
14
-
Inspired by [Shadcn UI](https://ui.shadcn.com/), the Styled kit is an innovative collection of pre-designed, fully customizable, and easy-to-reuse copy-paste components built with [Tailwind](https://tailwindcss.com), [cva](https://cva.style/docs) and css variables.
15
-
16
-
We believe the flexibility and constraints of tailwind utility classes (with all the available tooling around tailwind), the reusability and simplicity of cva variants, and the ease of customization of css variables, are currently the best options for starting out with a good design system that can grow with you as your brand evolves and solidifies itself.
11
+
We believe the flexibility and constraints of tailwind utility classes (with all the available tooling for tailwind), the reusability and simplicity of cva variants, and the ease of customization of css variables, are currently the best options for starting out with a good design system that can grow with you as your brand evolves and solidifies itself.
17
12
18
13
## Start with good defaults
19
14
20
-
If you've ever tried to create a design system from scratch, you should know how hard it is to find the right balance. How many variants should the button component have? Should we have 3 sizes, 4 sizes, 10? Should we include an "outline" variant? Should we allow composing "outline" variants with "color" variants or should the outline count as a sort of color?
15
+
If you've ever tried to create a design system from scratch, you should know how hard it is to find the right balance. How many variants should the button component have? Should it have 3, 4 or 10 sizes? Should it have an "outline" variant? How do we compose variants together?
21
16
22
-
If this feels confusing, don't worry. We consider those questions for each and every component to make sure that they're not only as easy as possible to use, but can also be used for a completely different style without having to change the code (e.g. from 'simple' to 'brutalist') 👀.
17
+
If this feels confusing, don't worry. We carefully take these questions into account for each and every Qwik UI component to make sure that they're not only as easy as possible to use, but can also be used for a completely different style without having to change components code (e.g. from 'simple' to 'brutalist').
23
18
24
19
## Change your entire app's style & theme at the click of a button
25
20
26
-
Check out our "make it yours" button ↗️ and see how easy it is to completely change the entire design of your app. Simply copy the css-variables config to your global css file and you're ready to go.
21
+
Check out our "make it yours" button and see how easy it is to completely change the entire design of your app. Simply copy the css-variables config to your global css file and you're ready to go.
27
22
28
23
Thanks to the super powers of copy/paste, you can start with well designed defaults but get away from them as your design system needs to evolve. Simply remove the code that you don't like and add the pieces that you need whenever you want.
29
24
30
25
## Avoid code duplication thanks to cva variants
31
26
32
27
A good design system is a system where all the variations of a component are defined within a single source of truth to represent all the possibilities within the constraints of the brand's identity. - [Maïeul Chevalier](https://x.com/maiieul)
33
28
34
-
The styled kit makes use of cva variants to allow for easy composition and avoid code duplication. No ButtonSmall, ButtonMedium, ButtonLarge, ButtonPrimary, ButtonSecondary, ButtonSmallPrimary, ButtonMediumPrimary, ButtonLargePrimary, ButtonSmallSecondary, ButtonMediumSecondary, ButtonLargeSecondary ... 💀, but instead just one `Button` with variants as props. Isn't `<Button size="sm">` much better?
29
+
The styled kit makes use of cva variants to allow for easy composition and avoid code duplication. No ButtonSmall, ButtonMedium, ButtonLarge, ButtonPrimary, ButtonSecondary, ButtonSmallPrimary, ButtonMediumPrimary, ButtonLargePrimary, ButtonSmallSecondary, ButtonMediumSecondary, ButtonLargeSecondary ... 💀, but just one `Button` with variants as props. Isn't `<Button size="sm">` much better?
0 commit comments