Docs
Gatsby
Gatsby
Install and configure Gatsby.
Create project
Start by creating a new Gatsby project using create-gatsby
:
npm init gatsby
Configure your Gatsby project to use TypeScript and Tailwind CSS
You will be asked a few questions to configure your project:
โ 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 following code to the tsconfig.json
file to resolve paths:
{
"compilerOptions": {
// ...
"baseUrl": ".",
"paths": {
"~/*": [
"./src/*"
]
}
// ...
}
}
Create gatsby-node.ts file
Create a gatsby-node.ts
file at the root of your project if it doesnโt already exist, and add the code below to the gatsby-node
file so your app can resolve paths:
import * as path from "path"
export const 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 nyxbui
init command to setup your project:
npx nyxbui@latest init
Configure nyxbui.json
You will be asked a few questions to configure nyxbui.json
:
Would you like to use TypeScript (recommended)? no / yes
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.
npx nyxbui@latest add button
The command above will add the Button
component to your project. You can then import it like this:
import { Button } from "~/components/ui/button"
export default function Home() {
return (
<div>
<Button>Click me</Button>
</div>
)
}