search

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.
MIT License
1.33k stars 178 forks source link

How to use shadcn/ui #205

Closed abidcf closed 4 months ago

abidcf commented 9 months ago

Can anyone help me to configure this project to use shadcn/ui. Any help would be great. https://ui.shadcn.com/

nilooy commented 9 months ago

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}'

  2. 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';

  2. Now install the components and use following Shadcn's docs as example 

    
npx shadcn-ui@latest add button


Should be good to go!