docs: add react with vite installation guide

[thesambayo]

[changeset-bot[bot]]

⚠️ No Changeset found

Latest commit: ea97d912991f1a6f95955071de40431b7c6d9259

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
ui	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 30, 2023 5:20pm

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
next-template	⬜️ Ignored (Inspect)			Jun 30, 2023 5:20pm

[vercel[bot]]

Someone is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.

[shadcn]

@samuelkurdz Thanks so much for creating the docs for this. Can we move it to installation.mdx?

[dan5py]

Can we move it to installation.mdx?

I was thinking the same thing. It would be great to have tabs in the Installation page for all the different frameworks.

[thesambayo]

@samuelkurdz Thanks so much for creating the docs for this. Can we move it to installation.mdx?

@shadcn Yes of course. Although I initially created the React with vite page like a sub-page under installation.

 {
  title: "Installation",
  href: "/docs/installation",
  items: [
    {
      title: "React with vite",
      href: "/docs/react-with-vite",
      items: [],
    },
  ],
},

but it did not appear as such.

[dan5py]

@samuelkurdz Something like this:

[thesambayo]

@dan5py Is anyone on this? or can I?

[dan5py]

@samuelkurdz I don't think so, go ahead

[thesambayo]

@dan5py I kind of have a decision between the page quick links by the right. so I want to share between the options I created.

1.

2.

[dan5py]

@samuelkurdz I think the first is cleaner.

[thesambayo]

@dan5py PR updated.

[thesambayo]

mdx-component.tsx

Done!

[shadcn]

@samuelkurdz This looks great. Question: do we want the following config in tsconfig.json?

"baseUrl": ".",
"paths": {
  "@/*": ["./src/*"]
}

So that aliases such as @/components/... are resolved?

Here's a CodeSandbox I was testing: https://codesandbox.io/p/sandbox/shadcn-ui-vite-m9ry84?file=%2Ftsconfig.json%3A8%2C22

[dan5py]

Yeah, this would keep the same aliases for different frameworks.

So I suggest keeping the @ alias format:

- alias: [{ find: "src", replacement: path.resolve(__dirname, "./src/") }],
+ alias: [{ find: "@", replacement: path.resolve(__dirname, "./src/") }],

And also the CLI prompts would remain the default ones:

- Configure the import alias for components: › src/components
- Configure the import alias for utils: › src/lib/utils
+ Configure the import alias for components: › @/components
+ Configure the import alias for utils: › @/lib/utils

[thesambayo]

@shadcn @dan5py I experimented with your suggestions and it works if the tsconfig.json and vite.config.ts updates comes first. So I will be updating this PR. Thanks.

Without that:

Configure the import alias for components: › @/components
Configure the import alias for utils: › @/lib/utils

This above created an @ folder in the root of the application that contains the components and utils file.

By the way, this is my first open-source contribution. Thanks for being nice!

[dan5py]

This above created an @ folder in the root of the application that contains the components and utils file.

Yeah I'm aware of this. Just add the paths on the Edit tsconfig.json step.

[thesambayo]

This above created an @ folder in the root of the application that contains the components and utils file.

Yeah I'm aware of this. Just add the paths on the Edit tsconfig.json step.

Updated!

[shadcn]

By the way, this is my first open-source contribution. Thanks for being nice!

No. Thank you. This is amazing!

[dan5py]

By the way, this is my first open-source contribution. Thanks for being nice!

You did a really great job! 🎉

[CarlosZiegler]

Really nice !!!!!! Thanks for supporting Vite :)

[CarlosZiegler]

Works really fine to me, and I added Dark mode guide for Vite: https://github.com/shadcn/ui/pull/750

[dan5py]

Hi @samuelkurdz, @mdloop is developing the installation page with Tabs where the content of each framework has its own file (to keep things cleaner). If #753 gets merged I'd like you to add the docs for vite that you created.

[shadcn]

@dan5py Should this one be merged first or #753?

[dan5py]

@dan5py Should this one be merged first or #753?

First #753. Then @samuelkurdz will update this PR.

[dan5py]

@samuelkurdz The new layout has been merged to main. You can now add the vite docs. Thanks in advance 💪.

[shadcn]

Awesome. Thanks so much @samuelkurdz