enuchi / React-Google-Apps-Script

This is your boilerplate project for developing React apps inside Google Sheets, Docs, Forms and Slides projects. It's perfect for personal projects and for publishing complex add-ons in the Google Workspace Marketplace.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

  1. Install Tailwind
npm install -D tailwindcss
npx tailwindcss init
  1. Add this line to your tailwind.config.js -> content
  './src/**/*.{ts,tsx}'
  1. 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

  1. create global.css file in your ./src/client dir and add this
@tailwind base;
@tailwind components;
@tailwind utilities;
  1. 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 the global.css
    in ./src/client/sidebar-about-page/index.js like this
import '../../global.css';
  1. Now install the components and use following Shadcn's docs
    as example
npx shadcn-ui@latest add button

Should be good to go!