Overview

A React component library built with Tailwind CSS v4 and shadcn/ui components.

Installation

pnpm add @xcidic/ui-lib

Setup

1. Install Peer Dependencies

After installing the library, you need to install all peer dependencies:

pnpm install --strict-peer-dependencies=false

This will automatically install all required peer dependencies including:

• All Radix UI primitives
• lucide-react (for icons)
• sonner (for toast notifications)
• embla-carousel-react (for carousels)

2. Copy CSS and Configure Tailwind Scanning

Copy the following configurations to your app's global CSS file.

@import "tailwindcss";
@import "tw-animate-css";

/* Scan library components for Tailwind classes */
@source "../node_modules/@xcidic/ui-lib/dist/**/*.js";

/* ----------------------------
   DARK MODE VARIANT
----------------------------- */
@custom-variant dark (&:is(.dark *));

/* ----------------------------
   THEME TOKENS (EQUIVALENT TO theme.extend)
----------------------------- */
@theme inline {
  /* Radius */
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);

  /* Breakpoints */
  --breakpoint-xs: 475px;

  /* Shadows */
  --shadow: 0 0.375rem 1.5rem 0 rgba(140, 152, 164, 0.125);
  --shadow-sm: 0 0.375rem 0.75rem rgba(140, 152, 164, 0.075);
  --shadow-lg: 0 0.6125rem 2.5rem 0.6125rem rgba(140, 152, 164, 0.175);

  /* Accordion Animations */
  @keyframes accordion-down {
    from {
      height: 0;
    }
    to {
      height: var(--radix-accordion-content-height);
    }
  }
  @keyframes accordion-up {
    from {
      height: var(--radix-accordion-content-height);
    }
    to {
      height: 0;
    }
  }
  --animate-accordion-down: accordion-down 0.2s ease-out;
  --animate-accordion-up: accordion-up 0.2s ease-out;

  /* FONT SIZES (converted from config) */
  --text-h1: 4rem / 4.8rem 700;
  --text-h2: 3.375rem / 4.05rem 700;
  --text-h3: 2.25rem / 2.7rem 700;
  --text-h4: 2rem / 2.4rem 700;
  --text-h5: 1.75rem / 2.1rem 700;
  --text-h6: 1.5rem / 2.25rem 700;
  --text-h7: 1.375rem / 2.0625rem 700;
  --text-h8: 1.25rem / 1.875rem 700;

  --text-b18: 1.125rem / 1.6875rem 500;
  --text-b16: 1rem / 1.5rem 500;
  --text-b14: 0.875rem / 1.3125rem 500;
  --text-b12: 0.75rem / 1.125rem 500;
  --text-b10: 0.625rem / 0.9375rem 500;
  --text-b8: 0.5rem / 0.75rem 500;

  --text-p16: 1rem / 1.5rem 400;
  --text-p14: 0.875rem / 1.3125rem 400;
  --text-p12: 0.75rem / 1.125rem 400;
  --text-p10: 0.625rem / 0.9375rem 400;
  --text-p8: 0.5rem / 0.75rem 400;

  --text-l16: 1rem / 1.5rem 700;
  --text-l14: 0.875rem / 1.3125rem 700;
  --text-l12: 0.75rem / 1.125rem 700;
  --text-l10: 0.625rem / 0.9375rem 700;
  --text-l8: 0.5rem / 0.75rem 700;

  /* Map to Tailwind tokens */
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-primary: var(--primary);

  /* Neutral Colors */
  --color-neutral-white: var(--neutral-white);
  --color-neutral-black: var(--neutral-black);
  --color-neutral-gray: var(--neutral-gray);
  --color-neutral-semantic: var(--neutral-semantic);
  --color-neutral-light: var(--neutral-light);
  --color-neutral: var(--neutral);
  --color-neutral-main: var(--neutral-main);
  --color-neutral-dark: var(--neutral-dark);
  --color-neutral-darker: var(--neutral-darker);

  /* Success Colors */
  --color-success-semantic: var(--success-semantic);
  --color-success-light: var(--success-light);
  --color-success: var(--success);
  --color-success-main: var(--success-main);
  --color-success-dark: var(--success-dark);
  --color-success-darker: var(--success-darker);

  /* Warning Colors */
  --color-warning-semantic: var(--warning-semantic);
  --color-warning-light: var(--warning-light);
  --color-warning: var(--warning);
  --color-warning-main: var(--warning-main);
  --color-warning-dark: var(--warning-dark);
  --color-warning-darker: var(--warning-darker);

  /* Danger Colors */
  --color-danger-semantic: var(--danger-semantic);
  --color-danger-light: var(--danger-light);
  --color-danger: var(--danger);
  --color-danger-main: var(--danger-main);
  --color-danger-dark: var(--danger-dark);
  --color-danger-darker: var(--danger-darker);

  /* Info Colors */
  --color-info-semantic: var(--info-semantic);
  --color-info-light: var(--info-light);
  --color-info: var(--info);
  --color-info-main: var(--info-main);
  --color-info-dark: var(--info-dark);
  --color-info-darker: var(--info-darker);

  /* Primary Colors */
  --color-primary-semantic: var(--primary-semantic);
  --color-primary-light: var(--primary-light);
  --color-primary-dark: var(--primary-dark);
  --color-primary-darker: var(--primary-darker);
}

/* -----------------------------------------
   BASE (Default theme = LIGHT)
----------------------------------------- */
:root {
  --radius: 0.625rem;

  /* Base Neutral Theme */
  --neutral-white: #ffffff;
  --neutral-black: #1e2002;
  --neutral-gray: #b2b9c3;
  --neutral-semantic: #f7f8fa;
  --neutral-light: #d8dadd;
  --neutral: #8c98a4;
  --neutral-main: #8c98a4;
  --neutral-dark: #677788;
  --neutral-darker: #5d6a7c;

  /* Success */
  --success-semantic: #e8f8f1;
  --success-light: #b8ead3;
  --success: #12b76a;
  --success-main: #12b76a;
  --success-dark: #0e9255;
  --success-darker: #0b6e40;

  /* Warning */
  --warning-semantic: #fefbf3;
  --warning-light: #fdedcd;
  --warning: #f6c158;
  --warning-main: #f6c158;
  --warning-dark: #c59a46;
  --warning-darker: #947435;

  /* Danger */
  --danger-semantic: #fdedeb;
  --danger-light: #f6bab3;
  --danger: #e11900;
  --danger-main: #e11900;
  --danger-dark: #b41400;
  --danger-darker: #870f00;

  /* Info */
  --info-semantic: #eef4fe;
  --info-light: #bfd4fb;
  --info: #276ef1;
  --info-main: #276ef1;
  --info-dark: #1f58c1;
  --info-darker: #174291;

  /* Primary (default to Light Theme) */
  --primary-semantic: #fff7f0;
  --primary-light: #ffdfc1;
  --primary: #ff9330;
  --primary-dark: #cc7626;
  --primary-darker: #99581d;
}

/* -----------------------------------------
   TW-COLORS THEMES
----------------------------------------- */

/* Light Theme */
:root[data-theme="light"] {
  --primary-semantic: #fff7f0;
  --primary-light: #ffdfc1;
  --primary: #ff9330;
  --primary-dark: #cc7626;
  --primary-darker: #99581d;
}

/* Dark Theme */
:root[data-theme="dark"] {
  --primary-semantic: #fdedeb;
  --primary-light: #f6bab3;
  --primary: #e11900;
  --primary-dark: #b41400;
  --primary-darker: #870f00;
}

/* Snow Theme */
:root[data-theme="snow"] {
  --primary-semantic: #eef4fe;
  --primary-light: #bfd4fb;
  --primary: #276ef1;
  --primary-dark: #1f58c1;
  --primary-darker: #174291;
}

/* -----------------------------------------
   DARK MODE (class="dark")
----------------------------------------- */
.dark {
  --background: oklch(0.141 0.005 285.823);
  /* (rest unchanged from your config) */
}

/* -----------------------------------------
   BASE APPLY
----------------------------------------- */
@layer base {
  body {
    @apply bg-background text-foreground;
  }
}

3. Import Components

import { Button, Input, Card, Accordion } from "ui-lib";

export default function Page() {
  return (
    <Card>
      <Input placeholder="Enter text..." />
      <Button>Click me</Button>
      <Accordion type="single" collapsible>
        {/* accordion items */}
      </Accordion>
    </Card>
  );
}

Available Components

• Accordion
• Avatar
• Badge
• Breadcrumb
• Button
• Button Icon
• Card
• Carousel
• Chat
• Checkbox
• Collapsible
• Container
• Dialog
• Dropdown Menu
• Header
• Icon
• Input
• Label
• Loading Fullscreen
• Multiple Input
• Multiple Select
• Notification
• Popover
• Progress
• Radio
• Scroll Area
• Search Field
• Select
• Separator
• Sidebar
• Skeleton
• Spinner
• Switch
• Table
• Text
• Textarea
• Toaster
• Upload File
• Upload Image