gluestack-ui is an unstyled library by default that can be changed to match your project's style and needs.
gluestack-ui is intentionally designed as an unstyled library, providing you with the flexibility to style your components as you prefer.
gluestack-ui provides a collection of unstyled components that can be styled according to a specific theme or design language. These components are reusable, consistent, interactive, and are accessible on the web, iOS, and Android.
Unstyled by Default: All gluestack-ui components are unstyled by default, allowing users to define their own styles or use a styling library.
Optional Styling: Users have the choice to apply custom styles to components, tailoring the appearance to match their project's requirements and design language.
Accessibility: Components are designed to be functional, and accessible, and follow the WAI-ARIA Authoring Practices guidelines, ensuring a seamless user experience.
Lightweight: gluestack-ui is lightweight, promoting better performance and faster load times.
The gluestack-ui provides multiple flexible styling options to customize the appearance of components according to your preferences.
By default, when you use @gluestack-ui/themed, you get plain, unstyled components.
But, it also comes with a package called @gluestack-ui/config, which has ready-made styles for all the components. So, you can choose these styles if you like. Please visit Themed Library for more information.
And, the cool part is, you can even create your own unique style if you want to give these components a personal touch.
Note: If you want to create your own design system with these components, it's advisable to refer to the customization guide available guide.
When we use the GluestackUIProvider, it doesn't come with any pre-defined styles. So, by default, all the components you get from @gluestack-ui/themed are unstyled.
However, you can make these components look the way you want by adding your own unique styles.
Note: Using custom components is recommended in case you are building your own design system and want to create everything from scratch.
Let's try creating an unstyled Button component
We utilize a function named createButton for the creation of a customized button component. This function accepts a configuration object that contains the styled components you wish to apply to the button. For guidance on the usage of styled components, you can refer gluestack.io/style function expects an object containing the styled components that can be tailored to meet your specifications. These styled components can be generated using the styled function, which is exported by @gluestack-style/react. Here is a basic example provided below.
// Understanding the API
In the above example, we are creating an accessible, universal Button component by using createButton function exported by @gluestack-ui/button package. We create various unstyled library using the API employed by styled function. These components are then passed as arguments to createButton function. Likewise, for each component, there exists a distinct package and API, specified in the documentation of the respective components.
Styling these components is achieved with the aid of the @gluestack-style/react library. We generate styled components and encapsulate them within an object, which is then provided as input to the function.