Skip to content

UI Components

Introduction

GlueStack UI provides a comprehensive set of pre-built components that you can use to build your app’s user interface. These components are designed to be highly customizable and easy to use, with accessibility features and easy to integrate into your project.

Customizing Components

All the basic components are built with nativewind and gluestack-ui.

Customizing Components

All components in AppLaunchKit are customizable, with the default components located in packages/components/primitives/. These primitive components serve as the foundation for all other components in the system.

To customize a component:

  1. Locate the Component: Navigate to the specific component folder within packages/components/primitives/.

  2. Modify the Styles: Open the styles.tsx file in the component folder. This file contains the default styles for the component.

  3. Update Default Styles: Adjust the styles using NativeWind/Tailwind classes. This will change the default appearance of the component throughout your application.

  4. Component-Specific Customization: For more targeted changes, you can modify the component file itself or create new variants.

Remember that all components use NativeWind for styling, which provides a Tailwind-like styling approach for React Native.

For more detailed information on customizing components and using NativeWind, please refer to the following resources:

These resources will provide in-depth guidance on styling components, creating variants, and leveraging the full power of NativeWind and Gluestack UI in your AppLaunchKit project.