Looking for documentation on gluestack-ui v2 with NativeWind? Refer to this link.
Building Design Systems
Introduction
gluestack-ui-design-system is a comprehensive design system built on top of the universal gluestack-ui library. It provides a collection of UI components , a Storybook for interactive development and testing, and a flexible configuration setup for seamless customization. It is a starter kit template to create your own Design System.
Getting Started
Go to the template repository for gluestack-ui-design-system.
Click on Use this template button on the top-right corner.
Clicking on Create a new repository will create a new repository with this template on your desired organization.
Clone that repository from your codebase.
Navigate to project directory
cd gluestack-ui-design-system
Install dependencies
yarn
Running Storybook
To interactively develop and test UI components, you can use Storybook. Follow these steps to run Storybook locally:
Navigate to storybook directory
cd example/storybook
Run to storybook on the web
yarn storybook
Run to storybook on mobile
yarn ios
Customization
The gluestack-ui-design-system allows for easy customization to align with your project's requirements. To customize the design system, follow these steps:
Customize design tokens (colors, sizes, media queries) and component themes in packages/config by adding, removing, or modifying entries.
Adjust component functionality by adding, removing, or modifying features in packages/themed.
To customize the branding with your own design system, navigate to the preview.js file within the .storybook folder and modify the relevant fields according to your branding preferences.
Documentation
You can find detailed documentation of gluestack-ui for each component, including a list of props, examples, and customization at https://v1.gluestack.io/ui/docs website.