Introduction

Yuki UI is a collection of reusable components built on top of shadcn/ui that follows a copy-paste methodology. Unlike traditional component libraries, Kaze UI components are meant to be copied directly into your project, giving you complete ownership and control over the code.

Philosophy

Our library extends the shadcn/ui approach - instead of importing components from a package, you copy the source code directly into your project. This means:

No version conflicts - Components evolve with your project
Full customization - Modify components to fit your exact needs
No dependency bloat - Only include what you actually use
Complete ownership - The code is yours to adapt and maintain

Getting Started

Each component page includes:

A live preview to see the component in action
Source code ready to copy into your project
Installation instructions (CLI or manual copy-paste)
Required dependencies

Installation Methods

CLI Installation

We provide installation through the shadcn CLI for quick addition of components:

npx shadcn add https://ui.tiesen.id.vn/r/<component-name>.json

npx shadcn add https://ui.tiesen.id.vn/r/<component-name>.json

pnpm dlx shadcn add https://ui.tiesen.id.vn/r/<component-name>.json

bunx --bun shadcn add https://ui.tiesen.id.vn/r/<component-name>.json

Manual Installation

Don't want to use the CLI? Each component page includes step-by-step instructions for manual installation.

Technology Stack

Yuki UI is built with modern web technologies:

React - Component-based UI development
TypeScript - Type-safe code with enhanced IDE support
Tailwind CSS - Utility-first styling
Radix UI - Unstyled, accessible component primitives
shadcn/ui - Foundational component architecture

Customization

Since you own the code, customization is unlimited. Each component uses Tailwind CSS and CSS variables, making theme adjustments straightforward and consistent.