forked from shadcn-ui/ui
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs(www): add installation guide for Gatsby (shadcn-ui#822)
* docs: add installation guide for Gatsby * docs: add PR review changes
- Loading branch information
1 parent
b0d59aa
commit b03c6d2
Showing
3 changed files
with
136 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,118 @@ | ||
--- | ||
title: Gatsby | ||
description: Install and configure Gatsby. | ||
--- | ||
|
||
<Steps> | ||
|
||
### Create project | ||
|
||
Start by creating a new Gatsby project using `Gatsby CLI`: | ||
|
||
```bash | ||
npx gatsby new | ||
``` | ||
|
||
### Configure your Gatsby project to use TypeScript and Tailwind CSS | ||
|
||
You will be asked a few questions to configure your project: | ||
|
||
```txt showLineNumbers | ||
✔ What would you like to call your site? | ||
· your-app-name | ||
✔ What would you like to name the folder where your site will be created? | ||
· your-app-name | ||
✔ Will you be using JavaScript or TypeScript? | ||
· TypeScript | ||
✔ Will you be using a CMS? | ||
· Choose whatever you want | ||
✔ Would you like to install a styling system? | ||
· Tailwind CSS | ||
✔ Would you like to install additional features with other plugins? | ||
· Choose whatever you want | ||
✔ Shall we do this? (Y/n) · Yes | ||
``` | ||
|
||
### Edit tsconfig.json file | ||
|
||
Add the code below to the tsconfig.json file to resolve paths: | ||
|
||
```ts {4-9} showLineNumbers | ||
{ | ||
"compilerOptions": { | ||
// ... | ||
"baseUrl": ".", | ||
"paths": { | ||
"@/*": [ | ||
"./src/*" | ||
] | ||
} | ||
// ... | ||
} | ||
} | ||
``` | ||
|
||
### Create gatsby-node.js file | ||
|
||
Create a `gatsby-node.js` file at the root of your project if it doesn’t already exist, and add the code below to the `gatsby-node.js` file so your app can resolve paths: | ||
|
||
```js | ||
const path = require("path") | ||
exports.onCreateWebpackConfig = ({ actions }) => { | ||
actions.setWebpackConfig({ | ||
resolve: { | ||
alias: { | ||
"@/components": path.resolve(__dirname, "src/components"), | ||
"@/lib/utils": path.resolve(__dirname, "src/lib/utils"), | ||
}, | ||
}, | ||
}) | ||
} | ||
``` | ||
|
||
### Run the CLI | ||
|
||
Run the `shadcn-ui` init command to setup your project: | ||
|
||
```bash | ||
npx shadcn-ui@latest init | ||
``` | ||
|
||
### Configure components.json | ||
|
||
You will be asked a few questions to configure `components.json`: | ||
|
||
```txt showLineNumbers | ||
Which style would you like to use? › Default | ||
Which color would you like to use as base color? › Slate | ||
Where is your global CSS file? › › ./src/styles/globals.css | ||
Do you want to use CSS variables for colors? › no / yes | ||
Where is your tailwind.config.js located? › tailwind.config.js | ||
Configure the import alias for components: › @/components | ||
Configure the import alias for utils: › @/lib/utils | ||
Are you using React Server Components? › no | ||
``` | ||
|
||
### That's it | ||
|
||
You can now start adding components to your project. | ||
|
||
```bash | ||
npx shadcn-ui@latest add button | ||
``` | ||
|
||
The command above will add the `Button` component to your project. You can then import it like this: | ||
|
||
```tsx {1,6} showLineNumbers | ||
import { Button } from "@/components/ui" | ||
|
||
export default function Home() { | ||
return ( | ||
<div> | ||
<Button>Click me</Button> | ||
</div> | ||
) | ||
} | ||
``` | ||
|
||
</Steps> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters