Skip to content

Commit a1cad33

Browse files
committed
docs: migration plan, dev guide, user guide, update readme
1 parent e0b1102 commit a1cad33

File tree

4 files changed

+2051
-2
lines changed

4 files changed

+2051
-2
lines changed

README.md

Lines changed: 31 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,9 @@ npm install @traefiklabs/faency@next
2020
yarn add @traefiklabs/faency@next
2121
```
2222

23-
Then you need to wire up the FaencyProvider which will hold the context with the Theme configuration and everything global that the components will need to work well.
23+
#### Using Stitches Components (Current)
24+
25+
Wire up the FaencyProvider which will hold the context with the Theme configuration:
2426

2527
> The provider accepts one parameter besides the `children`, which is the `primaryColor`, that will be used to build the colors used on the Theme. This color can be one of the colors exported by the `Stitches` config, just by adding `$` as a prefix, or can be any string that represents a CSS color.
2628
@@ -44,9 +46,36 @@ const Container = styled(Flex, {
4446
const MyComponent = () => <Container>{children}</Container>;
4547
```
4648

49+
#### Using Vanilla Extract Components (New - Recommended)
50+
51+
For better performance with static CSS, use the new Vanilla Extract components:
52+
53+
1. Import the CSS file in your app's entry point:
54+
55+
```jsx
56+
import '@traefiklabs/faency/dist/style.css';
57+
```
58+
59+
2. Wrap your app with the VanillaExtractThemeProvider:
60+
61+
```jsx
62+
import { VanillaExtractThemeProvider } from '@traefiklabs/faency';
63+
import { BoxVanilla, BadgeVanilla } from '@traefiklabs/faency';
64+
65+
const App = () => (
66+
<VanillaExtractThemeProvider defaultTheme="light" primaryColor="blue">
67+
<BoxVanilla css={{ p: '$4' }}>
68+
<BadgeVanilla variant="blue">Hello Faency!</BadgeVanilla>
69+
</BoxVanilla>
70+
</VanillaExtractThemeProvider>
71+
);
72+
```
73+
74+
> **Note**: Vanilla Extract components use static CSS generated at build time, providing better performance than runtime CSS-in-JS. Components with the `Vanilla` suffix (e.g., `BadgeVanilla`, `BoxVanilla`) require the CSS import above.
75+
4776
## How to contribute
4877

49-
- Make sure you have Node 12+, or if you prefer, you can work in a Docker container:
78+
- Make sure you have Node 18+, or if you prefer, you can work in a Docker container:
5079

5180
```sh
5281
docker run -it -v $(pwd):/usr/local/src/ -w /usr/local/src/ -p 3000:3000 node:latest bash

0 commit comments

Comments
 (0)