feat: Add shadcn as a cli option

[Exotica0122]

Is your feature request related to a problem? Please describe.

Since Theo loves shadcn too it would be nice to have shadcn out of the box. The config should be setup initially when using the cli and the user can add components after using the shadcn cli commands eg: npx shadcn-ui@latest add button after the project setup.

I'd personally use this a lot.

https://www.youtube.com/watch?v=G7lZBKFFnls

Describe the solution you'd like to see

Add shadcn as one of the steps

Describe alternate solutions

N/A

Additional information

No response

[juliusmarminge]

Why? You can just run npx shadcn-ui init yourself after.

[afonsopimenta]

Why? You can just run npx shadcn-ui init yourself after.

Running npx shadcn-ui init will completly override your tailwind.config.ts file meaning this will be lost:

extend: {
    fontFamily: {
        sans: ["var(--font-geist-sans)", ...fontFamily.sans],
    },
},

You gotta remember to add it back if you're gonna use Geist as your font. That being said, I dont think it is worth the work just because of this.

[juliusmarminge]

I have a PR to fix that https://github.com/shadcn-ui/ui/pull/3558

[Exotica0122]

Should I close it if it's not worth it?

[lem0n4id]

This issue might be worth to open again.

I had to take some time to set up shadcn with t3.

Few issues i ran into:

1. module resolution and path alias:

import { Button } from "../components/ui/button.tsx";
import { Textarea } from "../components/ui/textarea.tsx";

I had to use relative imports, which isnt idea. This got me to setup the path alias manually to use @/components/ui/textarea. I had to try out other module resolutions too

2. ignore @typescript-eslint/no-empty-interface lint rule by setting in .eslitrc.cjs

You can find my process documented in this PR here: https://github.com/lem0n4id/learnin10/pull/1

[flowergardn]

This issue might be worth to open again.

I had to take some time to set up shadcn with t3.

Few issues i ran into:

1. module resolution and path alias:

import { Button } from "../components/ui/button.tsx";
import { Textarea } from "../components/ui/textarea.tsx";

I had to use relative imports, which isnt idea. This got me to setup the path alias manually to use @/components/ui/textarea. I had to try out other module resolutions too

2. ignore @typescript-eslint/no-empty-interface lint rule by setting in .eslitrc.cjs

You can find my process documented in this PR here: https://github.com/lem0n4id/learnin10/pull/1

CT3A comes with a default path alias of ~, and this is configurable throughout the setup process. The shadcn/ui docs use @ for the same purpose. Simply, just change the @ to ~?

When blindly pasting code you can expect to make some changes within your workspace to accommodate it, not everything you paste will work exactly out of the box.

And, rather than excluding eslint errors (really bad practice), it's best to try to tackle it. In the case of shadcn/ui, you can simply just remove the custom interface as it's not needed, and just use the one that it extends.