This repository serves as an example of how to integrate Shadcn-UI into a RedwoodJS project. Shadcn-UI is a powerful UI library that offers a wide range of customization options. To get started, follow these installations steps or check the Shadcn-UI documentation.
-
Setup RedwoodJS
yarn create redwood-app my-redwood-project --typescript cd my-redwood-project yarn install
-
Setup Tailwind CSS using the following command:
yarn redwood setup ui tailwindcss
-
Initialize Shadcn-UI in your Redwood project's web workspace:
npx shadcn-ui@0.7.0 init -c web
-
Install the shacdn dependencies in your Redwood project's web workspace:
yarn workspace web add tailwindcss-animate class-variance-authority clsx tailwind-merge
-
During the init process, follow these configuration steps:
- Choose TypeScript if you created your Redwood project with TypeScript.
- Select a style theme from the available options. You can compare the default and New York styles here.
- Pick any base color.
- Set the path to your
index.css
assrc/index.css
. - It's recommended to choose CSS variables if you intend to use more theming options than just light and dark.
- Set the path to your Tailwind CSS configuration file as
config/tailwind.config.js
. - Set the path to your components directory as
src/components
. - Set the path for utils as
src/lib/utils
. - Disable React Server Components (NOTE: this feature may become available in the future).
- Save the
components.json
configuration.
The created
web/components.json
file should mostly look like this:{ "$schema": "https://ui.shadcn.com/schema.json", "style": "default", "rsc": false, "tsx": true, "tailwind": { "config": "config/tailwind.config.js", "css": "src/index.css", "baseColor": "slate", "cssVariables": true }, "aliases": { "components": "src/components", "utils": "src/lib/utils" } }
-
After completing the initialization, you can start adding components using the following command:
npx shadcn-ui@latest add -c web
For Redwood projects, this command would ideally create a folder for each component. Inside each component folder, you could add a
.test.tsx
file for tests and a.stories.tsx
file for stories.However, keep in mind that if you update the predefined components structure that
npx shadcn-ui@latest diff -c web
uses, you may lose the option to update the components automatically with . If you want to include test and story files, add them inside theui
folder next to your components and update your components with:npx shadcn-ui@latest diff -c web
With Shadcn-UI successfully integrated into your RedwoodJS project, you can now leverage its powerful components and styling options to build your web application. Explore the documentation and start creating beautiful user interfaces.
For more details, refer to the Shadcn-UI documentation.
Happy coding!