Getting Started with Gatsby
Install the package
First, create your application.
Execute one of the following commands in the terminal.
pnpm create gatsby -ts
Yamada UI allows you to use most components and hooks by simply installing @yamada-ui/react.
pnpm add @yamada-ui/react
If you want to use tables, calendars, carousels, etc., you need to install them separately.
pnpm add @yamada-ui/table
| Package | Description | |
|---|---|---|
| @yamada-ui/table | Provides convenient table components using @tanstack/react-table. | |
| @yamada-ui/calendar | Provides convenient calendar and date picker components using dayjs. | |
| @yamada-ui/carousel | Provides convenient carousel components using embla-carousel-react. | |
| @yamada-ui/dropzone | Provides convenient dropzone components using react-dropzone. | |
| @yamada-ui/charts | Provides convenient chart components using recharts. | |
| @yamada-ui/markdown | Provides convenient markdown components using react-markdown and react-syntax-highlighter. | |
| @yamada-ui/fontawesome | Provides components for conveniently using Font Awesome. |
To install individual components or hooks for improved performance, please check here.
If you only want to use the Yamada UI style system, please check here.
Add UIProvider
After installing Yamada UI, create gatsby-browser.tsx and add UIProvider.
gatsby-browser.tsx
import * as React from "react"import type { GatsbyBrowser } from "gatsby"import { UIProvider } from "@yamada-ui/react"export const wrapPageElement: GatsbyBrowser["wrapPageElement"] = ({element,}) => {return <UIProvider>{element}</UIProvider>}
The Default Theme is included within UIProvider.
If you want to customize the theme or configuration, please check Customize Theme and Customize Config.
Use components
Once you've added UIProvider, you can start using components within your application.
index.tsx
import * as React from "react"import { Button } from "@yamada-ui/react"import type { HeadFC, PageProps } from "gatsby"const IndexPage: React.FC<PageProps> = () => {return <Button>Click me!</Button>}export default IndexPageexport const Head: HeadFC = () => <title>Home Page</title>
Edit this page on GitHub