tailyew 0.1.0

Reusable Yew + Tailwind UI component library
Documentation

๐Ÿงฉ TailYew โ€“ Reusable Yew + Tailwind Component Library

TailYew is a modular, reusable UI component system for Yew built with the utility-first power of Tailwind CSS. It provides elegant, accessible, and composable components to build Rust web frontends faster and with consistency.

This crate is used internally in our own documentation site โ€” see ../frontend/ โ€” which showcases each component with live usage and examples.


๐Ÿ—๏ธ Project Goals

  • ๐Ÿ’ก Atomic Design pattern (atoms โ†’ molecules โ†’ organisms)
  • โš™๏ธ Yew-native components โ€” idiomatic Rust, no JavaScript
  • ๐ŸŽจ Tailwind-first styling โ€” utility-based, flexible, consistent
  • ๐Ÿงช Well-documented
  • ๐Ÿงฉ Composable API for building custom UIs

๐Ÿ“ Folder Structure

crates/tailyew/
โ”œโ”€โ”€ src/
โ”‚   โ”œโ”€โ”€ atoms/         # Low-level building blocks (buttons, inputs, etc.)
โ”‚   โ”œโ”€โ”€ molecules/     # Mid-level UI (forms, modals, selects)
โ”‚   โ”œโ”€โ”€ organisms/     # Full UI blocks (headers, footers, nav)
โ”‚   โ”œโ”€โ”€ charts/        # Data visualization components (optional)
โ”‚   โ”œโ”€โ”€ form/          # Form layout & state handling helpers
โ”‚   โ”œโ”€โ”€ icons/         # Custom SVG icon components
โ”‚   โ””โ”€โ”€ lib.rs         # Exports all components and modules
โ”œโ”€โ”€ Makefile           # Dev commands (build, docs)
โ”œโ”€โ”€ Cargo.toml         # Rust crate manifest
โ””โ”€โ”€ README.md          # You are here

๐Ÿงฐ Development

This crate is part of a Cargo workspace. You can develop it in isolation or alongside the documentation frontend.

๐Ÿ”ง Build

make build

๐Ÿ“š Generate docs

make doc

Or skip opening the browser:

make doc-no-open

๐Ÿงช Testing in the Docs Site

To see components in use:

  1. Run make run-frontend from the root
  2. Edit components in this crate (src/atoms/, etc.)
  3. Rebuild and preview live in frontend/

Hot reloading is handled via cargo watch from the root Makefile. The docs site imports this crate directly via:

# frontend/Cargo.toml
tailyew = { path = "../crates/tailyew" }

๐Ÿš€ Publishing

Before publishing, ensure tests and docs pass:

make doc-no-open

Then:

make publish-tailyew

๐Ÿ“Ž Related