You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
@@ -6,195 +6,72 @@ description: To get started with gluestack-ui, check out this quick installation
6
6
pageTitle: Installation
7
7
8
8
pageDescription: To get started with gluestack-ui, check out this quick installation guide. It provides simple steps to help you install and use the library in your projects.
9
-
10
-
showHeader: true
11
9
---
12
10
13
11
import { Canvas, Meta, Story } from'@storybook/addon-docs';
14
12
15
13
<Metatitle="Getting Started/Installation" />
16
14
17
-
## Installation
18
-
19
-
To get started with gluestack-ui, you can install it using `npx` to do initial setup and add any desired component package.
20
-
21
-
### Initialiser (Step 1)
22
-
23
-
To do the initial setup run:
24
-
25
-
```bash
26
-
npx gluestack-ui
27
-
28
-
```
29
-
30
-
This will:
31
-
32
-
- Check if gluestack-ui is installed in the project, if not it will create a `gluestack.config.ts` file which will have the default theme.
33
-
- It will create `GluestackUIProvider` (Wrapper component)
34
-
- Installs the required dependencies
35
-
-@dank-style/react
36
-
-@gluestack-ui/provider
37
-
38
-
<br />
39
-
40
-
### Component Adder (Step 2)
41
-
42
-
We can add a new component using npx `npx gluestack-ui add <package-name>`. For example, to add the button component package, you can run the following command:
43
-
44
-
```bash
45
-
npx gluestack-ui add button
46
-
47
-
```
48
-
49
-
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.
50
-
51
-
After installing the component, you can use it in your app by importing it and rendering it in your JSX. For example:
52
-
53
-
```jsx
54
-
import { Button } from'./components/button';
55
-
functionApp() {
56
-
return (
57
-
<>
58
-
<Button onPress={() =>alert('Clicked!')}>
59
-
<Button.Text>Click me!</Button.Text>
60
-
</Button>
61
-
</>
62
-
);
63
-
}
64
-
```
65
-
66
-
For components to work properly we need to wrap our components with `<GluestackUIProvider/>` and pass the theme from `gluestack-ui.config.ts` file.
67
-
68
-
#### Next.js Projects
69
-
70
-
For Next.js Projects update \_app.tsx with the below code:
`gluestack-ui` is supported in [Expo](https://expo.dev/) and [Next.js](https://nextjs.org/) initiated apps. Web support is made possible by `react-native-web`.
26
+
27
+
Refer the guides shown below to setup `gluestack-ui` in your Expo or Next.js app.
28
+
29
+
<AppProvider>
30
+
<HStack
31
+
space="md"
32
+
flex={1}
33
+
mb="$4"
34
+
sx={{
35
+
'@lg': {
36
+
flexDirection: 'row',
37
+
},
38
+
'flexDirection': 'column',
39
+
}}
40
+
>
41
+
<Hoverable
42
+
heading={'Expo CLI'}
43
+
subHeading={'Guide to install with expo-cli'}
44
+
href="/docs/getting-started/install-expo"
45
+
/>
46
+
<Hoverable
47
+
heading={'Next.JS'}
48
+
subHeading={'Guide to install with create-next-app'}
49
+
href="/docs/getting-started/install-nextjs"
50
+
/>
51
+
</HStack>
52
+
</AppProvider>
107
53
108
54
### Commands provided by gluestack-ui
109
55
110
-
#### Init gluestack-ui
111
-
112
-
```bash
113
-
npx gluestack-ui init
114
-
```
115
-
116
-
#### Init and add components
117
-
118
-
```bash
119
-
npx gluestack-ui
120
-
```
121
-
122
-
#### Add component
123
-
124
-
```bash
125
-
npx gluestack-ui add <component-name>
126
-
```
127
-
128
-
#### Update component
56
+
Below is the list of commands provided by `gluestack-ui`.
129
57
130
58
```bash
131
-
npx gluestack-ui update <component-name>
132
-
```
133
-
134
-
#### Remove component
135
59
136
-
```bash
137
-
npx gluestack-ui remove <component-name>
138
-
```
60
+
# init gluestack-ui
61
+
npx gluestack-ui init
139
62
140
-
#### Help
141
-
142
-
```bash
143
-
npx gluestack-ui help
144
-
```
145
-
146
-
This will render a button component that can be clicked and will display an alert when clicked.
147
-
148
-
## For Next.js Projects
149
-
150
-
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/ui-next-adapter` as a dependency and update \_document.js with the below code:
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.
198
-
199
-
The library follows WAI-ARIA authoring practices guidelines, making it accessible to a wide range of users.
200
-
It provides both controlled and uncontrolled options for maximum flexibility. The focus is fully managed and customizable, and the dismissing and layering behaviour can be highly customized as well. With gluestack-ui, you can create high-quality UI components with ease.
title: Installation in Expo project | gluestack-ui
3
+
4
+
description: To get started with gluestack-ui, check out this quick installation guide. It provides simple steps to help you install and use the library in your projects..
5
+
6
+
pageTitle: Installation
7
+
8
+
pageDescription: To get started with gluestack-ui, check out this quick installation guide. It provides simple steps to help you install and use the library in your projects.
9
+
---
10
+
11
+
import { Canvas, Meta, Story } from'@storybook/addon-docs';
12
+
13
+
import { AppProvider, Link, Box, HStack, Text } from'@gluestack/design-system';
14
+
15
+
<Metatitle="Getting Started/Install in Expo" />
16
+
17
+
# Install in Expo project
18
+
19
+
You can create a new Expo project using [Expo CLI](https://docs.expo.dev/get-started/create-a-new-app/). `gluestack-ui` provides a CLI to help you get started with the library. It includes initial installation setup and adding components to your project.
20
+
21
+
To get started with `gluestack-ui`, you can install it using `npx` to do initial setup and add any desired component package.
22
+
23
+
### Step 1: Initialiser
24
+
25
+
To do the initial setup run:
26
+
27
+
```bash
28
+
npx gluestack-ui@latest init
29
+
```
30
+
31
+
This will:
32
+
33
+
- Check if gluestack-ui is installed in the project, if not it will create a `gluestack.config.ts` file at the root of project which will have the default theme.
34
+
- It will create `GluestackUIProvider` (Wrapper component)
35
+
- It will add `styled` function created using [FontResolver](https://dank.style/docs/plugins/fonts-plugin) and [AnimationResolver](https://dank.style/docs/plugins/animation-plugin) plugins.
36
+
- Installs the required dependencies
37
+
-`@dank-style/react`
38
+
-`@dank-style/animation-plugin`
39
+
-`@gluestack-ui/provider`
40
+
41
+
<br />
42
+
43
+
### Step 2: Setup provider
44
+
45
+
`GluestackUIProvider` is a component that makes the aliases and tokens available throughout your app. It uses React's Context API. Add `GluestackUIProvider` to the root of your app and update `App.tsx` as follows:
For components to work properly we need to wrap our components with `<GluestackUIProvider />` and pass the theme from `gluestack-ui.config.ts` file.
62
+
63
+
### Step 3: Component Adder
64
+
65
+
We can add a new component using npx `npx gluestack-ui add <package-name>`. For example, to add the button component package, you can run the following command:
66
+
67
+
```bash
68
+
npx gluestack-ui add button
69
+
```
70
+
71
+
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.
72
+
73
+
### Run the Hello World example:
74
+
75
+
After installing the component, you can use it in your app by importing it and rendering it in your JSX. For example:
0 commit comments