shadcn-rust

⚠️ DEVELOPMENT WARNING ⚠️

This package is currently under active development and not ready for production use. APIs, commands, and functionality may change significantly between versions. Use at your own risk and expect breaking changes.

A command-line tool for adding beautiful UI components to Rust web applications. Inspired by shadcn/ui, this CLI works with Dioxus, Leptos, Yew, and Sycamore frameworks.

Features

• 🚀 Quick Setup: Initialize your project with a single command
• 🎨 Multiple Themes: Choose from different UI themes and color schemes
• 🔧 Framework Support: Works with Dioxus, Leptos, Yew, and Sycamore
• 📦 Component Registry: Access to a curated collection of UI components
• 🎯 Tailwind Integration: Automatic Tailwind CSS configuration
• 🔍 Project Diagnostics: Built-in health checks for your configuration

Installation

cargo install shadcn-rust

Quick Start

1. Initialize your project:

   shadcn-rust init
   

2. List available components:

   shadcn-rust list
   

3. Add components to your project:

   shadcn-rust add button card
   

4. Verify your setup:

   shadcn-rust doctor
   

Commands

init

Initialize a new project with component configuration.

shadcn-rust init [OPTIONS]

Options:

• --framework <FRAMEWORK> - Target framework: dioxus, leptos, yew, or sycamore
• --theme <THEME> - UI theme: default or new-york
• --base-color <COLOR> - Base color scheme: slate, gray, zinc, neutral, or stone
• --skip-tailwind - Skip Tailwind CSS setup
• --yes - Skip interactive prompts and use defaults
• --config <FILE> - Configuration file path (default: components.json)

Examples:

# Interactive setup
shadcn-rust init

# Non-interactive with specific options
shadcn-rust init --framework dioxus --theme default --base-color slate --yes

# Skip Tailwind setup
shadcn-rust init --framework leptos --skip-tailwind

list

List all available components for your framework.

shadcn-rust list [OPTIONS]

Options:

• --config <FILE> - Configuration file path (default: components.json)

Example:

shadcn-rust list

add

Add one or more components to your project.

shadcn-rust add <COMPONENTS>... [OPTIONS]

Arguments:

• <COMPONENTS>... - Names of components to add

Options:

• --force - Overwrite existing components
• --export - Add component exports to module files
• --config <FILE> - Configuration file path (default: components.json)

Examples:

# Add a single component
shadcn-rust add button

# Add multiple components
shadcn-rust add button card dialog

# Add with export and force overwrite
shadcn-rust add button --export --force

doctor

Diagnose your project configuration and environment.

shadcn-rust doctor [OPTIONS]

Options:

• --config <FILE> - Configuration file path (default: components.json)

Example:

shadcn-rust doctor

Configuration

The CLI uses a components.json file to store project configuration:

{
  "$schema": "https://shadcn-rust.com/schema.json",
  "framework": "dioxus",
  "style": "default",
  "tailwind": {
    "base_css": "tailwind.base.css",
    "output": "assets/tailwind.css",
    "baseColor": "slate"
  },
  "aliases": {
    "components": "src/components",
    "ui": "src/components/ui",
    "utils": "src/utils/shadcn",
    "hooks": "src/hooks"
  },
  "registry": "https://shadcn-rust.com/registry"
}

Configuration Fields

• framework: The target Rust web framework (dioxus, leptos, yew, sycamore)
• style: UI style variant (default)
• tailwind.output: Where compiled Tailwind CSS should be written
• tailwind.baseColor: Base color scheme for components
• aliases: Directory mappings for different component types
• registry: Component registry URL

Supported Frameworks

Dioxus

• Default Tailwind output: assets/tailwind.css
• Components are written as Dioxus components with .rs files

Leptos

• Default Tailwind output: styles/tailwind.css
• Components use Leptos view macros and reactive primitives

Yew

• Default Tailwind output: styles/tailwind.css
• Components use Yew's function components and hooks

Sycamore

• Default Tailwind output: styles/tailwind.css
• Components use Sycamore's view! macro and reactive system

Project Structure

After initialization, your project will have this structure:

your-rust-app/
├── components.json          # CLI configuration
├── src/
│   ├── components/
│   │   ├── ui/             # UI components from registry
│   │   └── mod.rs
│   ├── utils/
│   │   └── shadcn/         # Utility functions
│   └── hooks/              # Custom hooks (if applicable)
├── assets/                 # (Dioxus) or styles/ (others)
│   └── tailwind.css        # Compiled Tailwind CSS
└── tailwind.config.js      # Tailwind configuration

Component Registry

Components are fetched from the official Shadcn-Rust registry at https://shadcn-rust.com/registry. The registry contains:

• Framework-specific component implementations
• Tailwind CSS styles and themes
• TypeScript definitions and utilities
• Documentation and examples

Tailwind CSS Integration

The CLI automatically sets up Tailwind CSS for your project:

1. Configuration: Generates tailwind.config.js with framework-specific content paths
2. Base Styles: Creates base CSS files with theme variables
3. Component Styles: Includes necessary CSS for added components
4. Color Schemes: Supports multiple base color options

Tailwind Configuration Example

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{rs,html}", "./src/**/*.rs"],
  theme: {
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        // ... more color definitions
      },
    },
  },
  plugins: [],
};

Global Options

All commands support these global options:

• --config <FILE> - Specify a custom configuration file path (default: components.json)
• --yes - Skip interactive prompts and use default values
• --help - Show help information
• --version - Show version information

Troubleshooting

Common Issues

1. "Config not found" error: Run shadcn-rust init from your project root
2. "Components folder missing": Ensure your aliases in components.json point to valid directories
3. Network issues: The CLI requires internet access to fetch components from the registry

Getting Help

Use the doctor command to diagnose configuration issues:

shadcn-rust doctor

This will check:

• Configuration file validity
• Registry accessibility
• Component directory structure
• Theme availability

Examples

Setting up a new Dioxus project

# Initialize with Dioxus framework
shadcn-rust init --framework dioxus --theme default --base-color slate

# Add some common components
shadcn-rust add button card dialog

# Verify everything is working
shadcn-rust doctor

Adding components to an existing project

# List what's available
shadcn-rust list

# Add specific components with exports
shadcn-rust add table dropdown-menu --export

# Force overwrite existing component
shadcn-rust add button --force

Non-interactive usage (CI/CD)

# Set up project without prompts
shadcn-rust init --framework leptos --yes

# Add components in batch
shadcn-rust add button card table --export --yes

Requirements

• Rust: 1.75.0 or later
• Git: Required for fetching components from the registry
• Internet Connection: Needed to access the component registry

License

MIT © Codegress / Contributors