#Shadcn-ui integration with redwood

1 messages · Page 1 of 1 (latest)

past rover
#

Hello, I have been trying to get shadcn to work with RW but to no avail. Please if you have done so successfully (in the past or present) I would really love some guidance. Thank you in advance.

strong lynx
#

Hey @past rover sorry for the frustration ... I'm putting something together for you...

strong lynx
#

I recorded a Loom video explaining how to set up Shad and how to set up components. Hope this helps!

https://www.loom.com/share/0cf81fe3482342aca2d3d8a568bdd4ce?sid=eb28f2ed-58ae-4c18-a1e1-49b6d8210be6

Repo on GitHub: https://github.com/ahaywood/redwood-shadcn-example

A few commands that I referenced in the video...

Setting up Tailwind in a Redwood project:

yarn rw setup ui tailwindcss

and the documentation for setting up an alias. https://redwoodjs.com/docs/typescript/introduction#using-alias-paths

I did a little digging and figured out why the alias path didn't work. It's related to vite, not TypeScript.

Vite doesn't understand TypeScript's path mappings out of the box. You'll need to install a plugin to help Vite understand the path mappings.

yarn workspace web add vite-tsconfig-paths

and then within your vite.config.js file:

import tsconfigPaths from 'vite-tsconfig-paths';

export default {
  plugins: [tsconfigPaths()],
}

After doing this, you may need to restart your server: yarn rw dev and/or restart TypeScript within your VS Code project Cmd + Shift + P and look for "Restart TS Server"

... let me know if you run into any more trouble...

Loom
April 11, 2024 // RedwoodJS - Integrating ShadCN
GitHub
GitHub - ahaywood/redwood-shadcn-example

Contribute to ahaywood/redwood-shadcn-example development by creating an account on GitHub.

TypeScript in Redwood | RedwoodJS Docs

Getting started & Core Concepts

past rover
#

I am beyond grateful, thank you so much. I was able to successfully setup shadcn using your guide.

Thank you once again.

strong lynx
#

Sweet! 😎 ... I'm going to stick this within a guide in the documentation because I'm sure you're not the only one!

#

I didn't bother trying to set up the CLI tool, but I'll probably take a look at that too and report back

livid oasis
#

I’d be curious to see the CLI used as I believe you can tell shad what the imports should look like. If that works well, then it stands to reason that the CLI + RW’s generators would be a bit more integrated. The only downside is the tests and stories from the generator will still use default imports rather than a named imports

strong lynx
#

I haven’t looked at the CLI tool yet but I think you’re right about customizing the directory you want it to go in.

#

You can create custom generated files within Redwood so that you’re using named imports instead

livid oasis
#

Oh! Well this + the shadcn-cli would just be dandy! Thanks for the share.

Last time I tried the shadcn-cli it couldn't find specific packages, I believe. I came to the conclusion that RW's folder structure (and workspaces) was the cause.

If I can assist somehow, let me know. It and Zod integration into RW forms are two things I've had to "get over" in order to continue my RW app development. 🙂

strong lynx
#

🙌🏻 … I’ll look at it first thing tomorrow … also did you get the Zod integration piece figured out? … this is a cool project that @cyan cove has put together. https://community.redwoodjs.com/t/automatically-generated-forms-beta/5529/2

RedwoodJS Community
Automatically generated forms beta

This looks super cool!! With a simpler form, like the one in the example, rather than dealing with all the overhead, I would prefer to just do this, where everything related to field rendering (styling, label, errors…) is handled in those Field components (like in the demo on the components library): interface IFormCreateEntity { email: stri...

strong lynx
#

I got the CLI tool from ShadCN working 🙌 ... just takes a little bit of manual config. (I'll write up an official guide / docs)

You can't run npx shadcn-ui@latest init init ... It's will error out every time because it will say that Tailwind is not installed, which is not true, but it doesn't know where to look)

But, really, you don't need init anyway. -- That command is setting up all the ShadCN stuff that we did in our manual installation process. One thing you DO need tho is a components.json file that tells the ShadCN CLI tool where everything is.

We can create that manually and then the npx shadcn-ui@latest add <COMPONENT_NAME> thing will work

Inside your web directory, create a components.json file. The file is documented here: https://ui.shadcn.com/docs/components-json

I set up my project (and I pushed to the repo I shared above 👆) with these settings:

  "$schema": "https://ui.shadcn.com/schema.json",
  "aliases": {
    "components": "src/components",
    "ui": "src/components/ui",
    "utils": "src/lib/utils"
  },
  "style": "default",
  "tailwind": {
    "baseColor": "neutral",
    "config": "./config/tailwind.config.js",
    "css": "./src/index.css",
    "cssVariables": true,
    "prefix": "tw-",
    "rsc": false,
    "tsx": true
  }
}```

A few things worth noting...

You might have a different `style` variable, but I used the `default` styles when I went through the manual process.

The `aliases` section defines all the path names you'll use. I went back and added a `ui` folder to the `components` directory. Obviously, Shad won't automatically create a storybook file and a test file, but if you aren't modifying those components at all, it might be a better idea just to keep those components separate(?) ... depends on how you want to structure your app.

I did set `rsc` to `false` which is nice because before we had to manually remove `use client` from the top of the file.
components.json

Configuration for your project.

#

You can also set tsx to true or false depending on whether you're using TypeScript or not.

#

Now, when you want to install a component, you can do this 2 different ways (I'm going to recommend the second, but really it's just doing is simplifying the first way.)

FIRST WAY:
Navigate into the web directory: cd web and run npx shadcn-ui@latest add <NAME-OF-COMPONENT> and it should install whatever component you were looking for inside your components/ui folder.

TBH -- The First Way feels a little gross because typically you'll run all the commands from the root of your project and we're using npx -- but, npx just let's you execute the javascript package without installing it.

Yarn has something similar with yarn dlx but it does output more than running npx

For clarity, you can run npx here because we're running ShadCN scripts instead of Redwood scripts.

SECOND WAY:
Write a script inside the package.json file (root of your project directory) to do the same thing:

    "shad": "cd web && npx shadcn-ui@latest add"
  }```

Now, you don't need to navigate to the `web` directory and can continue to run all the commands from the root of your project:
```yarn shad <NAME-OF_COMPNENT>```
sharp moss
#

@strong lynx this is awesome, just used your guide to install shadcn in my redwood project and it worked like a charm. Thank you!

strong lynx
#

Woo hoo! I have an PR to add a guide to our docs

sharp moss
#

@strong lynx FYI I caught a "gotcha" in the shadcn integration. When you use yarn shad to create a component, shadcn will prefix the tailwind classes for the component with "tw-" to avoid conflicts. I've had to remove the "tw-" manually - I'm sure there's a faster / better way to do it, but thought might be worth looking into it and / or updating the new documentation page.

strong lynx
#

@sharp moss You should be able to manage that within the components.json file

# 
  "tailwind": {
    …
    "prefix": "tw-",
    ….
  }
}```
weak inlet
#

This was helpful to me as well!
I poked around about a month ago, but got a little confused at having Redwood expectations meet ShadCN expectations as to aliases and where each expected pieces to be.

eternal shell
whole junco
eternal shell
# whole junco <@137604202787635200> - Thanks for the tip. However I tried running that but I'm...

hey hey 👋

the tip was mainly meant for cleaner code because it removes the pathing issues with the cli working directory for monorepos like redwood.
so:

"scripts": {
    "shad": "cd web && npx shadcn-ui@latest add"
  }

would also simply become

"scripts": {
    "shad": "npx shadcn-ui@latest -c web add"
  }

(actually a bit unnecessary imo but I get that some people don't want to remember every command and aliases are a personal thing)

the described workarounds above should work nonetheless from my perspective and your issue is probably more related to your system setup.

I'd probably start with a new project? I'm unsure how your package.json file looks like and what kind of fixes you already tried.

or check the necessary files in amy's example repo:
https://github.com/ahaywood/redwood-shadcn-example
tsconfig, package.json, tailwind.config.json and whatnot.

GitHub
GitHub - ahaywood/redwood-shadcn-example

Contribute to ahaywood/redwood-shadcn-example development by creating an account on GitHub.

whole junco
leaden ore
#

@strong lynx thank you so much! One thing i noticed is that, after adding the component.json file, I no longer needed the "@/*": ["./src/*"], entry in the paths config object in my tsconfig.json.

Are you going to open a pull request against shad to make this into a guide? If not, I would be willing to open a PR there

leaden ore
strong lynx
#

@leaden ore I'll take a look at the the tsconfig.json file ... there is a difference between the prefix and the paths within the tsconfig -- The paths refers to the folder alias. for example, instead of saying:

import {componentName} from '../../../../../components/componentName'

(Eaggerating slightly, but you get the idea.) You could just say:

import {componentName} from '@/components/componentName'

The prefix is for how CSS variable names are prefixed. For example, here's a screenshot of the typography.ts config that Tailwind uses. ... all --tw-

CleanShot_2024-05-03_at_13.18.56.png
leaden ore
#

awesome! i'll keep you posted on my progress. Re: paths and prefix—totally, i got that they were different issues, thanks! looking back, i can see how it sounded like i was talking as if they were related 😅

strong lynx
#

Oh! 😂

leaden ore
#

Hey @strong lynx! I just put up this PR, take a look when you get the chance. And thanks again for the clear instructions!

strong lynx
#

@leaden ore Killer! Thanks for getting that in!! 🙌

eternal shell
strong lynx
#

@eternal shell Oh interesting! I'll take a look

#

Thanks for flagging

whole maple
#

Great tutorial. I managed to get everything working except that tests are failing when importing anything with the @ alias. eg
import { cn } from '@/lib/utils'

eg. error is " Cannot find module '@/components/Button/Button' from 'web/src/components/Calendar/Calendar.tsx'

If I swap out @ for src everything works fine

This can be replicated in the example repo in the docs

Does anyone have any ideas on getting that working?

#

(Mobile discord editing 👎 fail)

whole maple