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.

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.

• 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

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

Or install globally:

cargo install yewi-cli

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

Your project is now ready to go.

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

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]

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]

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

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

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
    └── ...

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;
    }
  }
}

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.)

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

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

body {
  @apply font-sans;
}

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

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

trunk serve --port <another-port>

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

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

MIT

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

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