`bash


Basic repair

The components.json file is created during initialization and contains configuration for your project:

`json
{
"$schema": "./schema/components-config.schema.json",
"tailwind": {
"config": "tailwind.config.js",
"css": "src/styles/globals.css",
},
"aliases": {
"components": "src/components",
"utils": "src/utils",
"constants": "src/constants"
}
}
`

You can edit this file to customize:
- tailwind.config: Path to your Tailwind configuration file
- css: Path to your global CSS file
- aliases: Paths where components, utilities, and constants are installed

> Note: The utils path in components.json is stored without a file extension. The CLI automatically adds .ts or .js extension based on whether your project uses TypeScript or JavaScript. When configuring path aliases, you should use the path without an extension as shown in the components.json file.

$3

Alongside your components.json, the CLI generates a JSON Schema file at schema/components-config.schema.json.
You can use this schema in your editor or CI to validate your configuration. It defines:
- $schema (string): URI of this schema file.
- tailwind (object): Paths to your Tailwind config (config) and CSS file (css).
- aliases (object): Directories for components, utils, and constants.

For full details, see schema/components-config.schema.json in your project.

Available Components

To see a complete list of all available components, run:

`bash
npx @cloudwick/astral-ui-cli add --list
`

This will display all components with their descriptions. You can also use the silent mode to get just the component names:

`bash
npx @cloudwick/astral-ui-cli add --list --silent
`

$3

| Component | Description |
|-----------|-------------|
| button | A button component with various styles, sizes, and states |
| card | A card component for displaying content in a contained way |
| select | A select component for selecting options from a list |

Using Components

After adding components, you can import and use them in your application:

$3

`tsx
import { Button } from '@components/button';
import { Card, CardHeader, CardContent } from '@components/card';
import { cn } from '@utils';
import { keyboardKeys, mobileBreakPoint } from '@constants';

export function MyComponent() {
return (

My Card



Card content goes here

The CLI creates a utility file with the cn function that helps combine Tailwind classes. This file:

- Is automatically created during initialization in the path specified in components.json (utils field)
- Has the appropriate file extension (.ts for TypeScript projects, .js for JavaScript projects) added automatically
- Should be imported in your components as import { cn } from '@utils' after setting up path aliases

The cn function allows you to conditionally combine class names and automatically handles Tailwind class conflicts.

Styling Components

The components in the registry require Tailwind CSS to be properly configured in your application. When you run npx @cloudwick/astral-ui-cli init, the CLI will:

1. Check for an existing Tailwind configuration and upgrade it with required settings
2. Create a CSS file with required CSS variables for component styling
3. Generate a STYLING.md file with documentation on the styling system

$3

The CLI intelligently handles existing Tailwind configurations:

- Automatically detects existing configuration files with any extension (.js, .ts, .mjs, .cjs)
- Creates a timestamped backup of any existing Tailwind configuration file
- Creates a new tailwind.config file with the appropriate extension based on your project type:
- TypeScript projects: .ts extension
- ESM projects: .mjs extension
- CommonJS projects: .js extension
- CommonJS in an ESM package (with "type": "module"): .cjs extension
- Preserves your project's language (TypeScript or JavaScript) and module system (ESM or CommonJS)

Required Tailwind features included in the configuration:
- Color system with RGB variables for primary, secondary, success, warning, error, and gray scales
- Custom box shadows for card components
- Dark mode support ("class" mode for theme toggling)

$3

The CSS file includes all necessary CSS variables that components reference, including:

- Base colors (primary, secondary, etc.)
- State colors (success, error, warning)
- Theme variables for light/dark mode

Troubleshooting

$3

If you're having problems with imports:

1. Check your configuration: Make sure the paths in tsconfig.json/jsconfig.json match your project structure
2. Framework-specific issues:
- Next.js: Make sure you're using the correct import format for your Next.js version
- tsconfig.app.json: If your project uses tsconfig.app.json, configure paths there as well
- Create React App: You'll need CRACO or similar to enable path aliases
3. Verify setup: The path alias setup instructions are shown during init - you can run npx @cloudwick/astral-ui-cli init again to see them
4. Check components.json: Make sure the paths in the "aliases" section match your project structure

$3

If components don't appear correctly styled:

1. Make sure the Tailwind CSS configuration is properly loaded in your application
2. Verify the CSS variables are included in your main CSS file
3. Check that your component is properly importing the required utilities
4. Run npx @cloudwick/astral-ui-cli repair-tailwind` to create a fresh Tailwind configuration
5. If you need to combine the new configuration with your existing customizations, use your backup file as a reference

Contributing

For information on developing and contributing to the CLI, please see the CONTRIBUTING.md file in the root of the repository.

License

MIT