8
Get Started

components.json

Configuration file for your AxionJS project.

The components.json file holds configuration for your project. It’s created automatically when you run npx axionjs-ui init.

You can use the components.json file to customize the import paths, component library, and styling for your project.

Schema

Here’s the structure of the components.json file:

components.json
{
  "$schema": "http://axionjs.com/schema.json",
  "style": "new-york",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "app/globals.css",
    "baseColor": "default",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks",
    "auth": "@/auth",
    "actions": "@/actions",
    "middleware": "@/middleware",
    "schemas": "@/schemas",
    "auth_comp": "@/components/auth",
    "api": "@/app/api",
    "email": "@/emails"
  },
  "iconLibrary": "lucide"
}

Configuration Options

style

The style for your components. Currently, we have two styles available: default and new-york.

{
  "style": "new-york"
}

rsc

Whether to use React Server Components.

{
  "rsc": true
}

tsx

Whether to use TypeScript for components.

{
  "tsx": true
}

tailwind

Configuration for Tailwind CSS.

OptionTypeDescription
configstringPath to the tailwind config file
cssstringPath to the CSS file
baseColorstringBase color for your project
cssVariablesbooleanWhether to use CSS variables
prefixstringPrefix to use for utility classes

aliases

Import aliases for your project. These are used to generate the import statements for the components.

{
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui"
  }
}

iconLibrary

The icon library to use for components that require icons.

{
  "iconLibrary": "lucide"
}

Customization

You can customize the configuration to match your project structure. For example, if you’re using a different folder structure, you can update the aliases object:

{
  "aliases": {
    "components": "~/components",
    "utils": "~/lib/utils",
    "ui": "~/components/ui"
  }
}

Always restart your development server after making changes to components.json.

Previous

Installation

Next

Theming

On this page