Skip to content
This repository was archived by the owner on Jan 23, 2024. It is now read-only.

Commit 5886cf1

Browse files
segunadebayosegunadebayo
committed
chore: use package manager tab for all docs
1 parent 699b829 commit 5886cf1

19 files changed

+222
-183
lines changed

‎configs/search-meta.json

+34-5
Original file line numberDiff line numberDiff line change
@@ -54657,14 +54657,25 @@
5465754657
}
5465854658
},
5465954659
{
54660-
"content": "Usage",
54660+
"content": "JavaScript Template",
5466154661
"id": "//getting-started/cra-guide",
5466254662
"type": "lvl3",
54663-
"url": "/getting-started/cra-guide#usage",
54663+
"url": "/getting-started/cra-guide#javascript-template",
5466454664
"hierarchy": {
5466554665
"lvl1": "Create React App",
5466654666
"lvl2": "Automatic Installation",
54667-
"lvl3": "Usage"
54667+
"lvl3": "JavaScript Template"
54668+
}
54669+
},
54670+
{
54671+
"content": "TypeScript Template",
54672+
"id": "//getting-started/cra-guide",
54673+
"type": "lvl3",
54674+
"url": "/getting-started/cra-guide#typescript-template",
54675+
"hierarchy": {
54676+
"lvl1": "Create React App",
54677+
"lvl2": "JavaScript Template",
54678+
"lvl3": "TypeScript Template"
5466854679
}
5466954680
},
5467054681
{
@@ -54674,7 +54685,7 @@
5467454685
"url": "/getting-started/cra-guide#whats-included",
5467554686
"hierarchy": {
5467654687
"lvl1": "Create React App",
54677-
"lvl2": "Usage",
54688+
"lvl2": "TypeScript Template",
5467854689
"lvl3": "What's included"
5467954690
}
5468054691
},
@@ -55305,12 +55316,30 @@
5530555316
"lvl3": "3. Optional Setup"
5530655317
}
5530755318
},
55319+
{
55320+
"content": "Customizing Theme",
55321+
"id": "//getting-started/remix-guide",
55322+
"type": "lvl4",
55323+
"url": "/getting-started/remix-guide#customizing-theme",
55324+
"hierarchy": { "lvl1": "Remix", "lvl2": "3. Optional Setup", "lvl3": null }
55325+
},
55326+
{
55327+
"content": "Add colorModeManager",
55328+
"id": "//getting-started/remix-guide",
55329+
"type": "lvl4",
55330+
"url": "/getting-started/remix-guide#add-colormodemanager",
55331+
"hierarchy": { "lvl1": "Remix", "lvl2": "Customizing Theme", "lvl3": null }
55332+
},
5530855333
{
5530955334
"content": "Notes on TypeScript 🚨",
5531055335
"id": "//getting-started/remix-guide",
5531155336
"type": "lvl4",
5531255337
"url": "/getting-started/remix-guide#notes-on-typescript-🚨",
55313-
"hierarchy": { "lvl1": "Remix", "lvl2": "3. Optional Setup", "lvl3": null }
55338+
"hierarchy": {
55339+
"lvl1": "Remix",
55340+
"lvl2": "Add colorModeManager",
55341+
"lvl3": null
55342+
}
5531455343
},
5531555344
{
5531655345
"content": "4. Community boilerplates",

‎content/community/recipes/prose.mdx

+7-12
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,6 @@ author: nikolovlazar
99

1010
[Chakra UI Prose](https://github.com/nikolovlazar/chakra-ui-prose) is a
1111
"second-party" package that adds ready-made styles to a remote HTML content.
12-
It's "second-party" because it's created by one of Chakra UI's maintainers, but
13-
it's not part of the core Chakra UI package just yet. The reason for that is to
14-
avoid bloating the core library while we figure out how much people actually
15-
need it. If there's a demand for it, it will be part of the core Chakra UI
16-
package.
1712

1813
> If you need this package to be part of the core library, don't forget to let
1914
> us know in
@@ -25,13 +20,13 @@ children content.
2520
Integrating the `Prose` component is fairly easy. To get started, you need to
2621
install the package:
2722

28-
```bash
29-
yarn add @nikolovlazar/chakra-ui-prose
30-
31-
# or
32-
33-
npm i @nikolovlazar/chakra-ui-prose
34-
```
23+
<PackageManagers
24+
command={{
25+
npm: 'npm install @nikolovlazar/chakra-ui-prose',
26+
yarn: 'yarn add @nikolovlazar/chakra-ui-prose',
27+
pnpm: 'pnpm add @nikolovlazar/chakra-ui-prose',
28+
}}
29+
/>
3530

3631
Then, you need to use the `withProse` theme extension to add the Prose component
3732
styling into your own theme:

‎content/docs/components/icon/usage.mdx

+7-6
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,13 @@ project.
1515
These icons are published into a separate package that is not part of
1616
`@chakra-ui/react` by default.
1717

18-
```bash
19-
npm i @chakra-ui/icons
20-
# or
21-
yarn add @chakra-ui/icons
22-
```
18+
<PackageManagers
19+
command={{
20+
npm: 'npm i @chakra-ui/icons',
21+
yarn: 'yarn add @chakra-ui/icons',
22+
pnpm: 'pnpm add @chakra-ui/icons',
23+
}}
24+
/>
2325

2426
## Usage
2527

@@ -190,4 +192,3 @@ When `children` is not provided, the `Icon` component renders a fallback icon.
190192
```jsx
191193
<Icon />
192194
```
193-

‎content/docs/styled-system/advanced-theming.mdx

+8-11
Original file line numberDiff line numberDiff line change
@@ -108,8 +108,7 @@ export default theme
108108
export { theme }
109109
```
110110

111-
See
112-
[this guide](/docs/styled-system/customize-theme#scaling-out-your-project)
111+
See [this guide](/docs/styled-system/customize-theme#scaling-out-your-project)
113112
for more recommendations on how to structure your theme package.
114113

115114
> Note ⚠️: If you're using TypeScript, you'll want to include some documentation
@@ -133,15 +132,13 @@ If you want to learn how to scale your custom theme you can
133132

134133
### Install
135134

136-
```bash
137-
yarn add --dev @chakra-ui/cli
138-
```
139-
140-
or
141-
142-
```bash
143-
npm install -D @chakra-ui/cli
144-
```
135+
<PackageManagers
136+
command={{
137+
npm: 'npm i -D @chakra-ui/cli',
138+
yarn: 'yarn add --dev @chakra-ui/cli',
139+
pnpm: 'pnpm add -D @chakra-ui/cli',
140+
}}
141+
/>
145142

146143
### Usage
147144

‎content/docs/styled-system/chakra-factory.mdx

+2-2
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@ Chakra factory serves as an **object of chakra enabled JSX elements**, and also
99
**a function that can be used to enable custom component** receive chakra's
1010
style props.
1111

12-
```bash
13-
import { chakra } from "@chakra-ui/react"
12+
```js
13+
import { chakra } from '@chakra-ui/react'
1414
```
1515

1616
## Chakra JSX Elements

‎content/docs/styled-system/cli.mdx

+14-10
Original file line numberDiff line numberDiff line change
@@ -49,20 +49,24 @@ Don't forget to replace `path/to/theme.ts` with your theme file location.
4949

5050
To generate typings for your theme, run the `theme` script:
5151

52-
```bash
53-
npm run theme
54-
# or
55-
yarn theme
56-
```
52+
<PackageManagers
53+
command={{
54+
npm: 'npm run theme',
55+
yarn: 'yarn theme',
56+
pnpm: 'pnpm theme',
57+
}}
58+
/>
5759

5860
If you'd like to continuously generate theme typings as you're editing your
5961
theme, run the `theme:watch` script:
6062

61-
```bash
62-
npm run theme:watch
63-
# or
64-
yarn theme:watch
65-
```
63+
<PackageManagers
64+
command={{
65+
npm: 'npm run theme:watch',
66+
yarn: 'yarn theme:watch',
67+
pnpm: 'pnpm theme:watch',
68+
}}
69+
/>
6670

6771
A successful execution should output something like this:
6872

‎content/docs/styled-system/rtl-support.mdx

+7-7
Original file line numberDiff line numberDiff line change
@@ -27,13 +27,13 @@ Here's how to set it up.
2727

2828
1. Install the stylis plugin and emotion's cache
2929

30-
```bash
31-
npm i stylis stylis-plugin-rtl @emotion/cache
32-
33-
# or
34-
35-
yarn add stylis stylis-plugin-rtl @emotion/cache
36-
```
30+
<PackageManagers
31+
command={{
32+
npm: 'npm i stylis stylis-plugin-rtl @emotion/cache',
33+
yarn: 'yarn add stylis stylis-plugin-rtl @emotion/cache',
34+
pnpm: 'pnpm add stylis stylis-plugin-rtl @emotion/cache',
35+
}}
36+
/>
3737

3838
2. Create the RTL provider using `CacheProvider` from emotion
3939

‎content/getting-started/cra-guide.mdx

+28-33
Original file line numberDiff line numberDiff line change
@@ -8,39 +8,34 @@ category: frameworks
88

99
## Automatic Installation
1010

11-
**Create React App** allows users to create a project using a template, which
11+
Create React App allows users to create a project using a template, which
1212
determines the files and dependencies included with the generated project.
1313

14-
We provide two official `create-react-app` templates for Chakra UI: one for
15-
JavaScript and the other for TypeScript.
14+
### JavaScript Template
1615

17-
### Usage
16+
To generate the starter template for a JavaScript project, run the command
17+
below:
1818

19-
In order to generate a `create-react-app` project from a template, you pass the
20-
`--template` flag to the `create-react-app` command.
19+
<PackageManagers
20+
command={{
21+
npm: 'npx create-react-app my-app --template @chakra-ui',
22+
yarn: 'yarn create react-app my-app --template @chakra-ui',
23+
pnpm: 'pnpm create react-app my-app --template @chakra-ui',
24+
}}
25+
/>
2126

22-
```bash
23-
# using npm
24-
npx create-react-app my-app --template [template-name]
27+
### TypeScript Template
2528

26-
# using yarn
27-
yarn create react-app my-app --template [template-name]
28-
```
29-
30-
The template name for the JavaScript project is `@chakra-ui`. The template name
31-
for the TypeScript project is `@chakra-ui/typescript`.
29+
To generate the starter template for a TypeScript project, run the command
30+
below:
3231

33-
```bash
34-
# JavaScript using npm
35-
npx create-react-app my-app --template @chakra-ui
36-
# JavaScript using yarn
37-
yarn create react-app my-app --template @chakra-ui
38-
39-
# TypeScript using npm
40-
npx create-react-app my-app --template @chakra-ui/typescript
41-
# TypeScript using yarn
42-
yarn create react-app my-app --template @chakra-ui/typescript
43-
```
32+
<PackageManagers
33+
command={{
34+
npm: 'npx create-react-app my-app --template @chakra-ui/typescript',
35+
yarn: 'yarn create react-app my-app --template @chakra-ui/typescript',
36+
pnpm: 'pnpm create react-app my-app --template @chakra-ui/typescript',
37+
}}
38+
/>
4439

4540
### What's included
4641

@@ -68,13 +63,13 @@ functionality.
6863
Inside your CRA project directory, install Chakra UI by running either of the
6964
following:
7065

71-
```bash
72-
npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6
73-
```
74-
75-
```bash
76-
yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6
77-
```
66+
<PackageManagers
67+
command={{
68+
npm: 'npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion',
69+
yarn: 'yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion',
70+
pnpm: 'pnpm add @chakra-ui/react @emotion/react @emotion/styled framer-motion',
71+
}}
72+
/>
7873

7974
### 2. Provider Setup
8075

‎content/getting-started/gatsby-guide.mdx

+7-7
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,13 @@ projects, however the API usage seen in the rest of the docs is the same!
1515
Gatsby plugins make external APIs plug-and-play into your website. Installing
1616
can be done with the following command:
1717

18-
```bash
19-
npm i @chakra-ui/gatsby-plugin @chakra-ui/react @emotion/react @emotion/styled framer-motion
20-
```
21-
22-
```bash
23-
yarn add @chakra-ui/gatsby-plugin @chakra-ui/react @emotion/react @emotion/styled framer-motion
24-
```
18+
<PackageManagers
19+
command={{
20+
npm: 'npm i @chakra-ui/gatsby-plugin @chakra-ui/react @emotion/react @emotion/styled framer-motion',
21+
yarn: 'yarn add @chakra-ui/gatsby-plugin @chakra-ui/react @emotion/react @emotion/styled framer-motion',
22+
pnpm: 'pnpm add @chakra-ui/gatsby-plugin @chakra-ui/react @emotion/react @emotion/styled framer-motion',
23+
}}
24+
/>
2525

2626
## Usage
2727

‎content/getting-started/index.mdx

+3-3
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,9 @@ terminal:
99

1010
<PackageManagers
1111
command={{
12-
npm: 'install @chakra-ui/react @emotion/react @emotion/styled framer-motion',
13-
yarn: 'add @chakra-ui/react @emotion/react @emotion/styled framer-motion',
14-
pnpm: 'add @chakra-ui/react @emotion/react @emotion/styled framer-motion',
12+
npm: 'npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion',
13+
yarn: 'yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion',
14+
pnpm: 'pnpm add @chakra-ui/react @emotion/react @emotion/styled framer-motion',
1515
}}
1616
/>
1717

‎content/getting-started/nextjs-guide.mdx

+7-7
Original file line numberDiff line numberDiff line change
@@ -37,13 +37,13 @@ of your file. **Chakra UI only works in client-side components**.
3737

3838
In your Next.js project, install Chakra UI by running either of the following:
3939

40-
```bash
41-
npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6
42-
```
43-
44-
```bash
45-
yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6
46-
```
40+
<PackageManagers
41+
command={{
42+
npm: 'npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion',
43+
yarn: 'yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion',
44+
pnpm: 'pnpm add @chakra-ui/react @emotion/react @emotion/styled framer-motion',
45+
}}
46+
/>
4747

4848
### Provider Setup
4949

0 commit comments

Comments
 (0)