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:

1. Scan your workspace for projects (looking for src/components/ui).
2. List available components from CoreUIX.
3. Copy the selected components to your project.
4. Rewrite imports automatically (e.g., changing internal @coreuix/lib/cn to your project's alias like @/lib/utils).
5. 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...

License

MIT © Codecious