---
title: Installation | gluestack-ui
description: A Quick Installation guide for gluestack-ui
---
import { Canvas, Meta, Story } from '@storybook/addon-docs';
# Installation
To get started with gluestack-ui, you can install it using `npx` to do initial setup and add any desired component package.
## Initialiser
To do initial setup run:
```bash
npx gluestack-ui add button
```
- Check if gluestack-ui is installed in project, if not it will create a `gluestack.config.ts` file which will have default theme.
- It will create `GluestackUIProvider` (Wrapper component)
- Installs the required dependencies
- @dank-style/react
- @gluestack-ui/provider
## Component Adder
We can add a new component using npx `npx gluestack-ui add `. For example, to add the button component package, you can run the following command:
```bash
npx gluestack-ui add button
```
This will install the `@gluestack-ui/button` package and add it to your project's dependencies. This will add the necessary code to your project, including importing the `createButton` function and creating a `Button` component using it.
After installing the component, you can use it in your app by importing it and rendering it in your JSX. For example:
```jsx
import { Button } from './components/button';
function App() {
return (
<>
);
}
```
## Commands provided by gluestack-ui
### Init gluestack-ui
```bash
npx gluestack-ui init
```
### Init and add components
```bash
npx gluestack-ui
```
### Add component
```bash
npx gluestack-ui add
```
### Update component
```bash
npx gluestack-ui update
```
### Remove component
```bash
npx gluestack-ui remove
```
### Help
```bash
npx gluestack-ui help
```
This will render a button component that can be clicked and will display an alert when clicked.
### For Next.js Projects
It's also recommended to set up your server-side rendering (SSR) correctly. To do this, you will need to use the flush() function exported by the library and call it in your \_document.js file. So, for Next.js projects we require `@gluestack/next-adapter` as a dependency and update \_document.js with below code:
```jsx
import * as React from 'react';
import { Html, Head, Main, NextScript } from 'next/document';
import { AppRegistry } from 'react-native-web';
import { flush } from '@dank-style/react';
function Document() {
return (
);
}
Document.getInitialProps = async ({ renderPage }: any) => {
AppRegistry.registerComponent('Main', () => Main);
const { getStyleElement } = AppRegistry.getApplication('Main');
const page = await renderPage();
const styles = [getStyleElement(), ...flush()];
return { ...page, styles: React.Children.toArray(styles) };
};
export default Document;
```
Make the following changes in `next.config.js`
```jsx
/** @type {import('next').NextConfig} */
// eslint-disable-next-line @typescript-eslint/no-var-requires
const { withGluestackUI } = require('@gluestack/next-adapter');
const nextConfig = {
reactStrictMode: true,
};
module.exports = withGluestackUI(nextConfig);
```
## Summary
In this guide, we've walked you through the process of installing gluestack-ui and adding a Button component to your project using the npx command. With gluestack-ui, you can benefit from a library of accessible and composable UI components that work seamlessly on mobile and web platforms.
The library follows WAI-ARIA authoring practices guidelines, making it accessible to a wide range of users.
It provides both controlled and uncontrolled options for maximum flexibility. The focus is fully managed and customizable, and the dismissing and layering behavior can be highly customized as well. With gluestack-ui, you can create high-quality UI components with ease.