Package Exports

@codecious/coreuix
@codecious/coreuix/dist/index.cjs

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@codecious/coreuix) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

CoreUIX

CoreUIX is a collection of re-usable, accessible, and customizable UI components built with Radix UI and Tailwind CSS.

Philosophy: "Put-in" Components

CoreUIX is not a traditional UI library that you install as a dependency (like MUI or Bootstrap). Instead, it follows a "put-in" philosophy (similar to shadcn/ui):

You own the code: Components are copied directly into your project's source code.
Full Customization: Since the code lives in your repository, you can modify, extend, and style it exactly how you need.
No Abstraction Layers: You don't have to fight against a library's API or theming system. You have direct access to the underlying markup and logic.

Features

🧩 Radix UI Primitives: Built on top of headless, accessible primitives.
🎨 Tailwind CSS: Styled with utility classes for rapid development.
📘 TypeScript: Fully typed for better developer experience.
🌓 Dark Mode: Ready for light and dark themes out of the box.
🔧 CLI Tool: An interactive installer to easily add components to your projects.

Getting Started

Prerequisites

Ensure your project is set up with:

React
Tailwind CSS
TypeScript

You should also have a cn utility for class merging (usually in src/lib/utils.ts):

import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Installation via CLI

CoreUIX comes with a CLI tool to automate the process of copying components into your projects.

Run the interactive installer:

npx coreuix

CLI Commands

Command	Description
`add`	Interactive menu to select and add components (default)
`add --all`	Install all available components at once
`update`	Update outdated components (compares signatures)
`help`	Show help and available commands

Examples:

# Interactive component selection
npx coreuix

# Add all components
npx coreuix add --all

# Update outdated components
npx coreuix update

How it works

The CLI will:

Scan your workspace for projects (looking for src/components/ui).
List available components from CoreUIX.
Copy the selected components to your project.
Rewrite imports automatically (e.g., changing internal @coreuix/lib/cn to your project's alias like @/lib/utils).
Add signatures to track component versions (for updates).

Signature System

Each copied component includes a signature comment at the top of the file:

// @coreuix-signature: a1b2c3d4

This signature (MD5 hash) allows the CLI to:

Detect outdated components when running update
Skip already-installed components when using add
Track which components came from CoreUIX

Note: The update command only works for components that have signatures. Use add --all first to ensure all components have signatures.

Manual Installation

If you prefer, you can manually copy the component files from libraries/CoreUIX/src/components/ui to your project. Just remember to update the imports to match your project structure.

Available Components

CoreUIX includes a wide range of components, including:

Layout: Accordion, Card, ScrollArea, Separator, Sheet, Sidebar...
Forms: Button, Checkbox, Input, Select, Switch, Slider, Form...
Feedback: Alert, Dialog, Progress, Sonner (Toast), Tooltip...
Navigation: Breadcrumb, DropdownMenu, Menubar, NavigationMenu, Tabs...
Data Display: Avatar, Badge, Calendar, Table, Chart...

@codecious/coreuix