Can't figure out how to install shadcn CLI

Get Help and Help Others
1

Hi all,

Must confess I’m quite new to RedwoodJS. Am trying to set this up with TailwindCSS and shadcn/ui, but running into errors. Tried the following for the past hour, but can’t quite figure out :frowning:

Steps taken:

  1. Start a new RedwoodJS project
  2. Following the vite tutorial here: https://ui.shadcn.com/docs/installation/vite, but with some modifications:
    a. skip steps 1 and 2, use yarn rw setup ui tailwindcss
    instead.
    b. at step 4, for the plugins: export, leave it as [redwoodjs()] rather than [react()]

I get the following error:

Error: Tailwind CSS is not installed. Visit Installation - Tailwind CSS to get started.
at $e (file:///C:/Users//AppData/Local/npm-cache/_npx/125ee17d583c4e03/node_modules/shadcn-ui/dist/index.js:3:7112)

I suspect it has to do with the paths needing a RedwoodJS-specific configuration (i.e. the ./src for Vite is not correct for RedwoodJS), but I might be entirely wrong. Alternatively, I was wondering if it’s simply impossible to use the shadcn CLI with RedwoodJS because of some hardcoded paths expected (hope not though!).

Thanks in advance for the help!

2

Ignore - I managed to find a bug report on it just 4 days ago showing that indeed it’s broken. Tldr, use shadcn 0.7.0, seems the latest has a bug! [Bug]: shadcn-ui init command error in empty redwoodjs project · Issue #3714 · shadcn-ui/ui · GitHub

3

Hey @twoflyingforks :wave: We do have some documentation on setting up shadcn in the works: it’s pretty much good to go and can be found in this PR: Docs: Added a How To guide for working with ShadCN by ahaywood · Pull Request #10459 · redwoodjs/redwood · GitHub. If any of that could help confirm your setup.

4

@ahaywood Has been awesome with documenting and explaining setting up shadcn. She did so in the last town hall https://www.youtube.com/live/ieNncwDB_B8?si=iEF-G0n1FWY5EySJ&t=490

1 Like
5

Appreciate the help - thanks @Josh-Walker-GM for pointing me in the right direction, and @ahaywood for the fantastic documentation that was super easy to follow :slight_smile:

1 Like
6

I set this up because I have installed ShadCN components into a couple projects that are still using JS:

These are all the ShadCN components already stripped down to work with JS in that “ui” folder so you don’t have to CLI download or manual download all of them and edit out the TS.

I did not do the Data Table / Table as those also need TanStack Table and will be more custom setup.

1 Like
7

FYI you should be able to install js components by setting the below flag in components.json or select typescript: false when using the CLI via npx shadcn@latest init

/// components.json
"tsx": false
1 Like