Yewi-Kit CLI

Yewi-cli is a command-line tool for managing UI components in your Yew projects, inspired by shadcn/ui. It allows you to create new projects from a pre-configured template, add components from the yewi-kit repository, and more. The CLI is written in Rust and uses yew for the frontend.

Why Yewi?

Yewi provides a streamlined workflow for building Yew applications with a focus on reusable UI components. It offers:

• A pre-configured project template with Tailwind CSS and SCSS support
• Add what you need, without bloating your project with unnecessary dependencies.
• Easy component management with full ownership of the component source code in your project.
• Easy customisation with Tailwind CSS variables and SCSS mixins.

Features

• Create new projects from a pre-configured template and colour themes
• List and search components from the yewi-kit repository
• Add components from the yewi-kit repository to any yewi project
• Automatic style imports - component styles are auto-imported
• Zero config - all setup is handled by the CLI
• Modern architecture - component-driven, organized structure

Installation

From Source

git clone https://github.com/Emii-lia/yewi-cli.git
cd yewi-cli
cargo install --path .

Or install globally:

cargo install yewi-cli

Quick Start

1. Create a New Project

yewi new my-app
cd my-app
yarn install
yarn build
trunk serve

Your project is now ready to go.

2. Add Components

Add any component from yewi-kit:

yewi add button
yewi add input badge

Or

yewi add
? Select components:   
> [ ] avatar
  [ ] avatar_group
  [ ] badge
  [ ] button
  [ ] card
  [ ] carousel
v [ ] checkbox
[↑↓ to move, space to select one, → to all, ← to none, type to filter]

This automatically:

• Downloads the component from yewi-kit repository
• Places it in src/components/<component-name>/
• Adds module declarations to src/components/mod.rs
• Imports styles in src/styles/components.scss

Usage

Create a New Project

yewi new my-project
yewi create my-project  # alias

You will be asked to select a theme:

yewi new my-project
 Creating a new Yew project: my-project

? Select theme:   
> Slate
  Gray
  Zinc
  Neutral
  Stone
  Emerald
v Blue
[↑↓ to move, enter to select, type to filter]

Add a Component

yewi add button
yewi add input
yewi add badge card

Or

yewi add
? Select components:   
> [ ] avatar
  [ ] avatar_group
  [ ] badge
  [ ] button
  [ ] card
  [ ] carousel
v [ ] checkbox
[↑↓ to move, space to select one, → to all, ← to none, type to filter]

List Available Components

yewi list
- avatar
- avatar_group
- badge
- button
- card
- carousel
...

Project Structure

After yewi new, your project will have this structure:

my-app/
├── src/
│   ├── components/           # Reusable UI components (add with yewi add)
│   │   └── mod.rs
│   ├── features/             # Feature-level components
│   ├── app/                  # App routes and layout (next.ts style)
│   │   ├── not-found/        # 404 page
│   │   ├── page.rs           
│   │   ├── route.rs
│   │   └── mod.rs            # App component
│   ├── styles/               # Global and component styles
│   │   ├── main.scss         # Global Tailwind + SCSS imports
│   │   ├── global.css        # Generated Tailwind CSS after `yarn build`
│   │   ├── components.scss   # Auto-imported component styles
│   │   └── features.scss
│   ├── types/                # Custom types and enums
│   └── main.rs               # Entry point
├── index.html
├── Cargo.toml
├── Trunk.toml
├── package.json
├── tailwind.config.js
├── postcss.config.js
└── yarn.lock

Component Structure

Each component downloaded with yewi add has this structure:

components/
└── button/
    ├── mod.rs              # Component view
    ├── hooks.rs            # Component logic (if needed)
    ├── types.rs            # Component types (if needed)
    └── button.scss         # Component styles
    └── ...

Styling with Tailwind + SCSS

Each component uses Tailwind CSS utilities combined with SCSS:

// src/components/divider/divider.scss
.Divider {
  @apply flex items-center gap-2 w-full;
  @apply text-slate-500 font-medium;
  &:before, &:after {
    @apply w-1/2 h-0.5 rounded-full bg-slate-500 content-[""];
  }
  &:not(&.has-children) {
    @apply w-full h-0.5 bg-slate-500 rounded-full;
  }
  &.vertical {
    @apply h-full flex flex-col items-center w-0.5 relative min-h-10 bg-inherit;
    &:before, &:after {
      @apply w-0.5 h-1/2 rounded-full bg-slate-500 content-[""] min-h-4;
    }
    &:not(&.has-children) {
      @apply w-0.5 h-full bg-slate-500;
    }
  }
}

Configuration Files

The template includes pre-configured:

• tailwind.config.js - Tailwind CSS configuration
• postcss.config.js - PostCSS with Tailwind & Autoprefixer
• Trunk.toml - Rust/Wasm build configuration with Sass support
• Cargo.toml - Rust dependencies (yew, wasm-bindgen, web-sys)
• package.json - Node dependencies (tailwindcss, postcss, sass, etc.)

Customization

Global Styles

Edit src/styles/main.scss for global styles:

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  @apply font-sans;
}

Troubleshooting

Component not found

Make sure the component exists in the yewi-kit repository:

• Check source: https://github.com/Emii-lia/yewi-kit
• Check docs: https://yewi.pages.dev

Styles not applied

1. Run yarn install to install all dependencies, then run yarn build to generate Tailwind CSS
2. Check that src/styles/components.scss has the component import
3. Restart trunk serve after adding components

Port already in use

trunk serve --port <another-port>

Git not available

If git is not installed, the CLI will fall back to downloading the template via GitHub API automatically.

Creating Custom Components

To add your own components to the project, follow these steps:

1. Create a directory under src/components/{component-name}/
2. Add at least mod.rs and {component-name}.scss
3. Export the component in src/components/mod.rs
4. Import styles in src/styles/components.scss

License

MIT

Support

For issues, questions, or suggestions, please open an issue on the GitHub repository

Yewi-Kit website

Visit the Yewi-Kit website for documentation, examples, and more information about the components available.