Cora-UI

Next-generation, high-performance React UI component kit engineered for modern interfaces.

Cora Philosophy

Cora-UI eliminates the overhead of traditional design systems. By building directly on top of Base UI unstyled component primitives and marrying them with React Aria's strict accessibility requirements, Cora-UI delivers polished, atomic, and composable UI patterns. Powered by the compilation engine of Tailwind CSS v4, it provides an elite developer experience without forcing a heavyweight runtime or complex provider setups onto your application.

Key Highlights

• Base UI Foundation — Leverages rock-solid, production-ready unstyled primitives from Base UI as the structural backbone for all complex components.
• Pure Composability — Utilizes a clean compound component design (Card.Header, Card.Content) to keep markup declarative, semantic, and readable.
• Zero Runtime Overhead — Completely avoids CSS-in-JS injection by leaning into compile-time Tailwind CSS utilities for speed and minor bundle footprints.
• Root-Level Ready — Operates without global <Provider> wrappers, seamlessly mounting right into React 19 and Next.js applications.
• Deep Accessibility — Built-in compliance with WCAG standards for complex focus rings, fluid keyboard traversal, and screen-reader semantics.
• Autonomous Engineering — Native integrations like MCP servers map design tokens directly to LLM context windows, giving AI assistants precise layout intuition.

Packages

| Package | Description | |:------------------------|:---------------------------------------------------------------------------------------------------------| | @cora-ui/react | Core component library containing primitive and layout nodes. | | @cora-ui/react/styles | Global design system styles, themes, and design tokens. | | @cora-ui/react/hooks | Reusable React hooks for state management and UI interactions. | | @cora-ui/react/utils | Internal utility methods and helper functions for data and styles. | | Individual packages | e.g. @cora-ui/react/button — tree-shakeable by default, just like named imports from @cora-ui/react. |

Quick Start

Initialize your React or Next.js layout by drawing the production library directly from the registry:

npm install @cora-ui/react

Add this to your main CSS file (e.g., globals.css):

@import "tailwindcss";
@import "@cora-ui/react/styles";

Refer to the official Cora-UI Onboarding Guide to map out global Tailwind token imports.

Intended Environments

Cora-UI is purposely tailored to fit data-dense, mission-critical production platforms:

• SaaS Foundations — Instant scaffolding for complex stateful tables, modal overlays, and contextual notifications.
• Control Dashboards — Ergonomic, pixel-dense layouts built to manage heavy reactive states cleanly.
• E-Commerce Storefronts — Highly performant, accessible, and SEO-friendly components for smooth shopping journeys.
• Marketing Sites & Landing Pages — Polished, visually striking user interfaces engineered entirely without a heavyweight runtime.
• Static Landing Engines — Strips away blocking scripts to keep vital performance metrics running smoothly.

License

Licensed under the MIT License. You can use Cora UI for both personal and commercial projects.

Elevate your interface. Built by developers, for creators.