ruru.json

The ruru.json file is used to configure the project.

We use it to understand how your project is set up and how to generate components customized for your project.

You can create a ruru.json file by running the following command:

npx ruru-ui-cli@latest init 

Read more about the init command here.

$schema

The $schema property is used to specify the version of the schema that the ruru.json file uses.

{
    "$schema": "https://ruru-ui.vercel.app/schema.json"
}

tailwind

config

The tailwind property is used to specify the configuration for the Tailwind CSS framework.

{
    "tailwind": {
        "config": "./tailwind.config.js"
    }
}

css

The css property is used to specify the configuration for your css file.

{
    "tailwind": {
        "css": "./app/globals.css"
    }
}

cssVariables

The cssVariables property is used to specify if you would like to use CSS variables for colors.

{
    "tailwind": {
        "cssVariables": true
    }
}

prefix

The prefix property is used to specify if you are using a custom tailwind prefix eg. tw-.

{
    "tailwind": {
        "prefix": "tw-"
    }
}

rsc

The rsc property is used to specify if you would like to use the RSC (React State Component) pattern.

{
    "rsc": true
}

tsx

The tsx property is used to specify if you would like to use TypeScript.

{
    "tsx": true
}

aliases

The aliases property is used to specify the import alias for components and utils.

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

utils

The utils property is used to specify the import alias for utils.

{
    "aliases": {
        "utils": "@/lib/utils"
    }
}

components

The components property is used to specify the import alias for components.

{
    "aliases": {
        "components": "@/components/ui"
    }
}

ui

The ui property is used to specify the import alias for ui components.

{
    "aliases": {
        "ui": "@/components/ui"
    }
}

provider

The provider property is used to specify the import alias for the provider.

{
    "aliases": {
        "provider": "@/lib/provider"
    }
}

interfaces

The interfaces property is used to specify the import alias for interfaces.

{
    "aliases": {
        "interfaces": "@/lib/interfaces"
    }
}