Skip to content

Commit

Permalink
fix: config updated
Browse files Browse the repository at this point in the history
  • Loading branch information
Suraj authored and Suraj committed Mar 6, 2024
1 parent 044d55d commit 9df69eb
Showing 1 changed file with 18 additions and 6 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,21 @@ import { AppProvider, CodePreview, Text } from '@gluestack/design-system';

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:

> Note: Commit you changes before ejecting, this command with update the imports!!
> Note: Commit your changes before ejecting, this command with update the imports!!
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.
1. **Update Config**: Run following command to install the latest version of `@gluestack-ui/config`.

```bash
npm i @gluestack-ui/config@latest
```
OR

```bash
yarn add @gluestack-ui/config@latest
```


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.

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

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.
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.

3. Remove the config file passed inside provides at the root of the project. Wrap the root of the project with `GluestackUIProvider` only.
4. Remove the config file passed inside provides at the root of the project. Wrap the root of the project with `GluestackUIProvider` only.

```jsx
<GluestackUIProvider>{children}</GluestackUIProvider>
```

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

```jsx
// gluestack-ui.config.ts
Expand Down Expand Up @@ -84,7 +96,7 @@ declare module '@gluestack-style/react' {
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).

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.
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.

## Customizing Animations

Expand Down

0 comments on commit 9df69eb

Please sign in to comment.