Docs
Installation

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:

components.json
{
  "$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.

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.

components.json
{
  // Other configurations
  "tsx": false
}

For configuring import aliases in a TypeScript project, you can use the jsconfig.json or tsconfig.json files.

jsconfig.json
{
  "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.