shadcn

Setup without Typescript

Prerequisites

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

# During npx shadcn@latest init -y, it has trouble installing these packages.
#   So, I installed them manually.
npm install tailwindcss-animate class-variance-authority lucide-react clsx tailwind-merge

Install shadcn/ui

npx shadcn@latest init -y

It will create / change the following files:

  • Will change ./css/global.css.
  • Will create ./src/lib/utils.js.
  • Will create ./components.json.
  • Will change tailwind.config.js.

Test shadcn in React page

To use shadcn components, you need to add the first. For example, you want the button component, you run : npx shadcn@latest add button. It will create ./src/components/ui/button.jsx in your project.

Code: ButtonTest.jsx
import { Button } from "@/components/ui/button"
 
export default function ButtonTest() {
  return (
    <div>
      <Button>A button</Button>
    </div>
  )
}
Output