Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/shadcn-ui/ui/llms.txt

Use this file to discover all available pages before exploring further.

This project and the components are written in TypeScript. We recommend using TypeScript for your project as well. However we provide a JavaScript version of the components as well. The JavaScript version is available via the CLI.

​
Configuration

To opt-out of TypeScript, you can use the tsx flag in your components.json file.
components.json
{
  "style": "new-york",
  "rsc": false,
  "tsx": false,
  "tailwind": {
    "config": "",
    "css": "src/app/globals.css",
    "baseColor": "zinc",
    "cssVariables": true
  },
  "iconLibrary": "lucide",
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  }
}

​
Setting up import aliases

To configure import aliases, you can use the following jsconfig.json:
jsconfig.json
{
  "compilerOptions": {
    "paths": {
      "@/*": ["./*"]
    }
  }
}

​
Adding components

Once you have set tsx: false in your components.json file, the CLI will automatically add components in JavaScript format.
1
Initialize your project
2
Run the init command to create a new project or configure an existing one:
3
npx shadcn@latest init
4
When prompted, select No for TypeScript.
5
Add components
6
Add components to your project using the CLI:
7
npx shadcn@latest add button
8
The component will be added as a .jsx file instead of .tsx.
9
Use the component
10
You can now use the component in your JavaScript files:
11
import { Button } from "@/components/ui/button"

export default function Home() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  )
}
While JavaScript is supported, we strongly recommend using TypeScript for better type safety and developer experience.