How to use shadcn/ui
abidcf opened this issue · comments
Can anyone help me to configure this project to use shadcn/ui. Any help would be great.
https://ui.shadcn.com/
I will try to write few instructions that i used to set up shadcn/ui
- Install Tailwind
npm install -D tailwindcss
npx tailwindcss init
- Add this line to your
tailwind.config.js
-> content
'./src/**/*.{ts,tsx}'
- Init Shadcn
npx shadcn-ui@latest init
use
./src/client/components
for your component dir and./src/client/utils
for utils dir when asked by cli
- create
global.css
file in your./src/client
dir and add this
@tailwind base;
@tailwind components;
@tailwind utilities;
- import this file to your
index.js
of the client folder you want,
as example, i want to use tailwind into./src/client/sidebar-about-page
, so for that, i will import theglobal.css
in./src/client/sidebar-about-page/index.js
like this
import '../../global.css';
- Now install the components and use following Shadcn's docs
as example
npx shadcn-ui@latest add button
Should be good to go!