Introduction

Nocta UI is a modern, accessible React component library built with simplicity, performance, and developer experience at its core. Every component is crafted to be beautiful, functional, and accessible by default.

Philosophy

Our design philosophy centers around four core principles that guide every decision:

Minimal

Clean components with no unnecessary complexity. Every element serves a purpose, every interaction feels natural.

Performant

Copy-paste approach with CLI tooling. Components live in your codebase, giving you full control and customization power.

Accessible

WCAG compliant components with keyboard navigation, screen reader support, and semantic HTML.

Developer First

Full TypeScript support, intuitive APIs, and comprehensive documentation for the best developer experience.

Architecture

Copy-Paste Philosophy

Unlike traditional component libraries, Nocta UI follows the copy-paste approach pioneered by shadcn/ui. Instead of installing a package, you use our CLI to copy component source code directly into your project:

Terminal

# Initialize your project with required dependencies
npx nocta-ui init

# Add components to your project
npx nocta-ui add button card badge

# Components are now in your /components/ui directory
# You own the code and can modify it however you want

Benefits of this approach:

Full control - modify components to fit your exact needs
No version conflicts - components are copied, not installed
Easy customization - change styling, behavior, or structure
React focused - optimized for Next.js, Vite React and React Router projects
Minimal dependencies - lightweight with minimal external dependencies
Multiple themes - Choose from Charcoal, Jade, Copper, or Cobalt themes during initialization

Composable Design

Components are designed to work together seamlessly. Complex interfaces are built by composing simple, focused components:

User Profile

Compose multiple components together

John Doe

Premium

User Profile Component

<Card>
  <CardHeader>
    <CardTitle>User Profile</CardTitle>
    <CardDescription>Compose multiple components together</CardDescription>
  </CardHeader>
  <CardContent>
    <div className="flex items-center gap-3">
      <Avatar src="/user.jpg" fallback="JD" />
      <div>
        <div className="font-medium">John Doe</div>
        <Badge variant="secondary">Premium</Badge>
      </div>
    </div>
  </CardContent>
</Card>

TypeScript First

Every component is built with TypeScript from the ground up:

Full type safety for all props and component APIs
IntelliSense support in modern IDEs
Runtime safety with comprehensive prop validation
Extensible interfaces for custom implementations

Getting Started

Ready to start building with Nocta UI? Check out our Quick Start Guide