Introduction
Koyo UI is a shadcn-based component system for Koyo products. It maps reusable React components and blocks to Koyo-owned Figma components and tokens so design and implementation stay aligned.
What is Koyo UI?
Koyo UI is not a traditional install-and-forget component library. It is a catalog of source-owned components, blocks, and patterns that teams can preview, copy into their apps, and adapt to product needs.
Built on the shadcn/ui approach, each entry is shaped around Koyo's design decisions: Figma tokens, CSS variables, spacing, radius, typography, and interaction patterns that should feel native across Koyo interfaces.
The Figma file includes base/store components as implementation and reference context. The product-facing docs focus on Koyo-owned components: the variants and blocks teams should copy into Koyo apps.
Not a Standard Library, but a Component Catalog
Following the philosophy of shadcn/ui, Koyo UI keeps component code visible and editable. Instead of hiding UI behind an opaque package, it gives teams concrete starting points they can copy, modify, and keep close to the product code that uses them.
Why Use Koyo UI?
shadcn/ui provides a strong foundation for accessible, composable primitives. Koyo UI turns that foundation into Koyo-specific building blocks, with examples and defaults that match the way our product surfaces are designed.
The goal is to reduce the translation gap between Figma and code. Teams can start from reviewed variants, apply the same token vocabulary used by designers, and still keep full ownership of the component source after copying it into an app.
What Koyo UI Provides
Koyo UI is a practical shared catalog for product teams that need consistent interfaces without giving up local control. It documents what to copy, how variants are composed, and how each piece connects back to Koyo design tokens.
- Copy-and-paste source: Browse reusable Koyo component catalog, inspect the implementation, and bring the code directly into the app that needs it.
- Koyo Figma mapping: Align Koyo-owned component variants with the color, typography, spacing, radius, and state tokens used in Koyo design files.
- Product-ready blocks: Use higher-level blocks as starting points for repeated product workflows instead of rebuilding the same layouts from scratch.
- shadcn-compatible patterns: Keep the familiar Radix, Tailwind CSS, and variant composition patterns used across shadcn/ui projects.
- Local ownership: After copying a component, teams can adjust behavior, styling, and integration details without waiting on a shared package release.
- Design-to-code consistency: Use the same naming and token decisions across Figma, CSS variables, and component examples.
- Clear source boundaries: Treat base/store Figma pieces as reference context while keeping Koyo-owned components as the catalog output.
- Upstream attribution: Keep the shadcn/ui patterns and MIT-licensed Shadcn Studio origins visible without carrying upstream marketing into Koyo docs.