Installation
How to initialize ruma-ui and configure dependencies in your React project.
1
Create a React or Next.js project
If you don't have an existing project, you can initialize ruma-ui init in an empty directory to automatically create a Next.js project, or create one manually:
npx create-next-app@latest my-app --typescript --tailwind --eslint
2
Run the ruma-ui CLI init command
Run the init command to set up your project dependencies and create your components.json config file:
npx ruma-ui init
3
Configure components.json
The CLI generates a components.json file in your project root:
{
"$schema": "https://ruma.5dev.in/schema.json",
"style": "default",
"tsx": true,
"tailwind": {
"css": "src/styles/globals.css",
"baseColor": "neutral",
"cssVariables": true
},
"aliases": {
"components": "@/components",
"utils": "@/lib/utils",
"ui": "@/components/ui"
}
}4
Start adding components
You can now add components to your project:
npx ruma-ui add button card tabs