Skip to content

Commit 9df69eb

Browse files
SurajSuraj
authored andcommitted
fix: config updated
1 parent 044d55d commit 9df69eb

File tree

1 file changed

+18
-6
lines changed
  • example/storybook/src/ui/theme-configuration/customizing-theme/EjectLibrary

1 file changed

+18
-6
lines changed

example/storybook/src/ui/theme-configuration/customizing-theme/EjectLibrary/index.stories.mdx

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,21 @@ import { AppProvider, CodePreview, Text } from '@gluestack/design-system';
2424

2525
Customizing components allows you to tailor the components according to your design system or guidelines to match your project's unique visual identity. To customize tokens and components, follow these steps:
2626

27-
> Note: Commit you changes before ejecting, this command with update the imports!!
27+
> Note: Commit your changes before ejecting, this command with update the imports!!
2828
29-
1. **Eject**: Run following command to eject the theme. This will create a **components** folder in your project root directory and copy all the styled components.
29+
1. **Update Config**: Run following command to install the latest version of `@gluestack-ui/config`.
30+
31+
```bash
32+
npm i @gluestack-ui/config@latest
33+
```
34+
OR
35+
36+
```bash
37+
yarn add @gluestack-ui/config@latest
38+
```
39+
40+
41+
2. **Eject**: Run following command to eject the theme. This will create a **components** folder in your project root directory and copy all the styled components.
3042

3143
```bash
3244
npx gluestack-ui-scripts eject
@@ -36,15 +48,15 @@ npx gluestack-ui-scripts eject
3648
This will overwrite the existing styles with default one. (It is NOT RECOMMENDED to eject again)
3749
If you need to eject the components, then save the changes and copy/paste them manually.
3850

39-
2. If you are already using `@gluestack-ui/themed` inside your project, running this command will automatically change the imports from `@gluestack-ui/themed` to the components folder path.
51+
3. If you are already using `@gluestack-ui/themed` inside your project, running this command will automatically change the imports from `@gluestack-ui/themed` to the components folder path.
4052

41-
3. Remove the config file passed inside provides at the root of the project. Wrap the root of the project with `GluestackUIProvider` only.
53+
4. Remove the config file passed inside provides at the root of the project. Wrap the root of the project with `GluestackUIProvider` only.
4254

4355
```jsx
4456
<GluestackUIProvider>{children}</GluestackUIProvider>
4557
```
4658

47-
4. **Update Tokens**: go to `components/gluestack-ui.config.ts` file. Update the tokens as per your requirements.
59+
5. **Update Tokens**: go to `components/gluestack-ui.config.ts` file. Update the tokens as per your requirements.
4860

4961
```jsx
5062
// gluestack-ui.config.ts
@@ -84,7 +96,7 @@ declare module '@gluestack-style/react' {
8496
8597
You can customize all the tokens of the theme in `config`. For a complete list of tokens and default values, please check [default Tokens](https://gluestack.io/ui/docs/theme-configuration/theme/default-tokens).
8698

87-
5. **Update Components**: you can find all of your components theme inside `./components` folder. For example, if you want to customize `Button` component, you can find its theme file at `./components/button/index.tsx`. Update component's style as per your requirements.
99+
6. **Update Components**: you can find all of your components theme inside `./components` folder. For example, if you want to customize `Button` component, you can find its theme file at `./components/button/index.tsx`. Update component's style as per your requirements.
88100

89101
## Customizing Animations
90102

0 commit comments

Comments
 (0)