gluestack-ui-design-system

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

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://gluestack.io/ui/docs website.

Tech Stack

JavaScript, React, React Native, Styled System

IniZio / gluestack-ui-design-system