Yuki UI

An application toolkit for modern React

Build the product. Keep the source.

A source-first toolkit for Next.js that brings together shadcn/ui components, authentication, utilities, and native building blocks without locking your codebase to a runtime component library.

TypeScript-first
React ready
Source ownership

Your application

Build from source, then make it yours.
Next.js
import { Button } from "@/components/ui/button"
import { auth } from "@/lib/auth"

export default function Dashboard() {
  return <Button>Open dashboard</Button>
}

Install

Add what you need.

Inspect

Read the source.

Own

Change anything.
Why it works

A foundation that stays out of your way.

The goal is not to hide your application architecture. It is to give you a strong starting point and let your project take over from there.

Composable

Start with primitives, compose larger patterns, and keep the source close to your application.

Source-owned

Install source into your repository instead of depending on a black-box component package.

Fast to ship

Go from an empty page to a polished product surface without rebuilding the same foundations.

Built for real products

Typed APIs, accessible defaults, authentication, database adapters, and practical utilities.

Composition

Small primitives. Real application UI.

Compose familiar building blocks instead of adopting a new mental model for every screen.

Project settings

Keep configuration close to the feature.

Deployment status

Your latest build is ready.
Production
Preview
Familiar by design

The UI feels familiar because the architecture is familiar.

Build with the conventions you already know: composable primitives, variants, controlled state, and source-level customization.

Composable APIs

Use a primitive alone or build a higher-level pattern.

Registry-driven

Install source exactly where your application expects it.

Easy to extend

Add your own conventions without fighting the toolkit.

Readable source

Debug and customize the implementation directly.
One ecosystem

More than a component library.

Bring the same source-first philosophy to the foundations that sit around your UI.

UI

A flexible component foundation built around familiar shadcn/ui patterns.

Auth

Authentication primitives and adapters that keep identity concerns close to your app.

Developer tools

Hooks and libraries for common application concerns without unnecessary abstractions.

Native

React Native components with the same design language and compositional mindset.

Authentication

Identity should feel like part of your application.

Use a typed authentication layer with a predictable data model and adapters for the database stack you already use.

Read the auth docs

Application data model

Keep identity and session state explicit.

User

The canonical identity in your application.

Account

Connect credentials and external providers.

Session

Represent active authenticated sessions.
React Native

Same design language. Native interaction.

Native implementations keep the compositional feel of the web system while respecting mobile interaction patterns.

Native UI

Native controls and touch interactions.

Shared patterns

Familiar composition across platforms.

One mental model from desktop to mobile.

Move faster when your product spans platforms. Keep the vocabulary consistent without forcing browser behavior onto native surfaces.

Native bottom sheets instead of browser popovers
Mobile-friendly controlled state patterns
Accessibility semantics for native controls
Developer experience

Install it like a library. Maintain it like your code.

Registry commands give you a fast starting point without taking ownership away from your team.

Install

Pull the source through the registry.

Inspect

Understand every line in your repository.

Adapt

Make it fit your product and conventions.

Start building

Ready when you are

Build something worth shipping.

Start with the foundation, then let your product take the lead.