Introduction

Kibo UI — A modern, motion-focused React component library built for developer ownership.

Kibo UI is not just another component library. It is a collection of meticulously crafted, animation-heavy, premium React components designed to elevate your application's user experience.

Instead of hiding behind opaque npm packages, Kibo distributes its components via source code. When you add a Kibo component, the actual source code is injected directly into your project. You own the code, you customize the styles, and you control the behavior.

Core Principles

To ensure the highest quality experience for both developers and end-users, Kibo is built on these foundational pillars:

  • Developer Ownership: Components are installed directly into your source code via our CLI. No hidden abstraction layers. No untyped props. You have full visibility and control over what runs in your app.
  • Motion-First: Built-in, high-performance, frame-perfect animations powered by GSAP and Framer Motion. Motion is not an afterthought; it is fundamental to how Kibo components feel.
  • Premium Aesthetics: Every component is designed with painstaking attention to detail, utilizing a strict, sophisticated design system that stands out from generic defaults.
  • Accessible: Built with semantic HTML, keyboard navigation, and ARIA attributes in mind. Animations also respect prefers-reduced-motion automatically.
  • Fully Typed: Written entirely in TypeScript for an excellent developer experience, auto-completion, and peace of mind.

Tech Stack

Kibo UI components are designed to drop seamlessly into modern React ecosystems. They rely on the following stack:

  • Framework: React 18+ (Next.js is highly recommended)
  • Styling: Tailwind CSS for effortless utility-based customization
  • Animation: GSAP and Framer Motion for handling complex physics and timeline sequences
  • Icons: Lucide React