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
Framework agnostic - works with any React setup
Zero dependencies - only React itself as a peer dependency

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

Styling Architecture

Built on Tailwind CSS with a systematic approach:

Button Component Structure

// Consistent class organization - you can modify this directly
const baseStyles = `
  inline-flex items-center justify-center rounded-lg
  transition-all duration-200 ease-in-out
  focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2
`;

// Add your own variants or modify existing ones
const variants = {
  primary: `bg-neutral-900 text-white hover:bg-neutral-800`,
  secondary: `bg-neutral-100 text-neutral-900 hover:bg-neutral-200`,
  // Add custom variant for your brand
  custom: `bg-purple-600 text-white hover:bg-purple-700`
};