Installation
How to install `shadxn`, configure dependencies, and structure your app with custom component registries.
shadxn
enhances your development workflow by enabling the flexible integration of components and dependencies. This guide covers the installation process and the initial setup of your application using shadxn
.
Frameworks
Installation
To install shadxn
, you can use your preferred package manager. shadxn
does not require installation as an npm dependency but rather works as an independent CLI tool that you integrate into your project for managing component registries.
npm
npm install -g shadxn
Yarn
yarn global add shadxn
pnpm
pnpm add -g shadxn
Setting Up Registries
shadxn
introduces the concept of registries - a powerful feature allowing you to manage collections of components. You can configure multiple registries, including custom ones, to suit your project's needs.
To configure registries, update your components.json
file as follows:
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "default",
"rsc": true,
"tsx": true,
"tailwind": {
"config": "tailwind.config.ts",
"css": "styles/globals.css",
"baseColor": "slate",
"cssVariables": true,
"prefix": ""
},
"aliases": {
"components": "@/components",
"utils": "@/lib/utils"
},
"registries": [
{
"name": "shadcn",
"baseUrl": "https://ui.shadcn.com"
},
{
"name": "shadxn",
"baseUrl": "https://ui.shadxn.com"
},
{
"name": "localhost",
"baseUrl": "http://localhost:3001"
}
]
}
This configuration includes the default shadcn
registry and a custom shadxn
registry. You can also add your own registries by specifying their name and base URL.
Note: Pages that are part of the original shadcn
documentation and remain applicable to shadxn
are copied without changes. The information on these pages continues to be relevant and useful for shadxn
users.
TypeScript and JavaScript Support
shadxn
and its components are written in TypeScript, offering type safety and developer experience benefits. However, a JavaScript version of the components is also available for projects not using TypeScript.
To opt-out of TypeScript in your project, you can modify the tsx
flag in your components.json
file.
{
// Other configurations
"tsx": false
}
For configuring import aliases in a TypeScript project, you can use the jsconfig.json
or tsconfig.json
files.
{
"compilerOptions": {
"paths": {
"@/*": ["./*"]
}
}
}
This installation guide aims to get you started with shadxn
quickly, highlighting the unique feature of registries which allows for a flexible and powerful way to manage components in your project.