@halvaradop/ui

A modern, accessible, and customizable React UI component library, organized as a monorepo and styled with TailwindCSS v4. This library provides pre-styled, reusable components to help you build user interfaces faster and more consistently.

Version Compatibility

Supports both React 18 and React 19. Use the table below to select the correct library version for your React version:

React version	Library version	NPM tag
React 19	^1.y.z (latest stable)	latest
React 18	^0.y.z-legacy.n (legacy)	legacy

Note:

• For React 19, install the default package version (@halvaradop/ui-button).
• For React 18, use the @legacy tag (@halvaradop/ui-button@legacy) to ensure compatibility.

Installation

Find available components in the packages directory. Install the desired package with the @halvaradop prefix using your preferred package manager:

For React 19 (Stable)

npm install @halvaradop/ui-button
yarn add @halvaradop/ui-button
pnpm add @halvaradop/ui-button

For React 18 (Legacy)

npm install @halvaradop/ui-button@legacy
yarn add @halvaradop/ui-button@legacy
pnpm add @halvaradop/ui-button@legacy

Usage

Import components and use them in your application:

import { Button } from "@halvaradop/ui-button"

export default function App() {
  return <Button variant="outline">Click Me</Button>
}

Components

• Button
• Card
• Checkbox
• Core
• Dialog
• Form
• Input
• Label
• RadioGroup
• Select
• Slot
• Submit
• Textarea
• Toggle

Versioning and Releasing

Each package maintains its own CHANGELOG.md to track changes, bug fixes, and releases. For detailed changelogs, refer to the specific package directory. Additionally, a general CHANGELOG.md provides an overview of the main changes in the current major version of the library.

Styling

The component supports TailwindCSS v4. To customize colors, use the following CSS variables. For the full theme, see the theme file.

@import "tailwindcss";

@theme {
  --breakpoint-base: 900px;

  --rounded: 0.375rem;
  --opacity-cursor: 80%;

  --color-muted: oklch(65% 0.01 260);
  --color-border: oklch(70% 0.02 260);
  --color-overlay: oklch(30% 0.02 260 / 0.3);

  --color-success: oklch(75% 0.18 140);
  --color-danger: oklch(65% 0.2 25);

  --color-surface: oklch(98% 0 0);
  --color-on-surface: oklch(20% 0.02 260);

  --color-primary: oklch(30% 0 270);
  --color-on-primary: oklch(95% 0 0);

  --color-secondary: oklch(60% 0 270);
  --color-on-secondary: oklch(10% 0 0);

  --color-ghost: oklch(94% 0.01 260);

  --color-disabled: oklch(92% 0 0);
  --color-on-disabled: oklch(60% 0.01 260);

  --size-sm: 1.75rem;
  --size-base: 2.25rem;
  --size-md: 2.75rem;
  --size-lg: 3.25rem;
}

Dark Theme Support

The library currently supports only a dark theme. To enable it, update the CSS variables as follows:

:is(html, body).dark {
  --color-muted: oklch(70% 0.01 260);
  --color-border: oklch(35% 0.01 260);
  --color-overlay: oklch(0% 0 0 / 0.6);
  --color-success: oklch(70% 0.19 150);
  --color-danger: oklch(65% 0.22 25);
  --color-surface: oklch(15% 0.005 260);
  --color-primary: oklch(90% 0 0);
  --color-on-primary: oklch(20% 0 270);
  --color-secondary: oklch(60% 0 0);
  --color-on-secondary: oklch(10% 0 270);
  --color-ghost: oklch(25% 0 0);
  --color-disabled: oklch(30% 0 0);
}

Contributing

We welcome contributions to the @halvaradop/ui library! Please read the Contributing Guide for details on our process, code standards, and how to get started. All contributors are expected to follow our Code of Conduct.

Architecture

For an in-depth look at the monorepo structure, package layout, build and development workflow, design principles, and guidelines for extending the library, refer to the ARCHITECTURE.md document.