Looking for documentation on gluestack-ui with NativeWind (alpha) version? 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://gluestack.io/ui/docs website.

Tech Stack

JavaScript, React, React Native, Styled System