Adamo UI

A comprehensive React component library built with TypeScript, Tailwind CSS, and Radix UI primitives.

Installation

npm install @adamosuiteservices/ui react-day-picker@^9.11.1 cmdk@^1.1.1 date-fns@^4.1.0

Documentation

Getting started

• AI Guide - Complete development guide for using the component library
  • Component architecture patterns
  • Prop conventions and usage
  • Styling system and best practices
  • Accessibility guidelines
  • Import patterns and setup instructions

Design system

• Colors and design tokens - Comprehensive color system reference
  • OKLCH color system
  • Semantic color tokens
  • Theme variants
  • Dark mode support

Component documentation

• UI components - Documentation for 41+ UI components

  • Forms: Button, Input, Select, Checkbox, Radio, Switch, Textarea, Combobox
  • Overlays: Dialog, Sheet, Popover, Tooltip, Dropdown Menu, Context Menu
  • Feedback: Alert, Progress, Spinner
  • Navigation: Tabs, Breadcrumb, Pagination
  • Data Display: Table, Card, Badge, Avatar, Typography
  • And many more...

• Layout components - Application layout components

  • Sidebar
  • Toaster (Toast notifications)
  • Full Screen Loader

Interactive examples

• Storybook documentation - Interactive component examples and playground

Quick start

// Import global styles (once in your app entry point)
import "@adamosuiteservices/ui/styles.css";

// Import components (use individual imports)
import { Button } from "@adamosuiteservices/ui/button";
import { Input } from "@adamosuiteservices/ui/input";
import { Dialog, DialogContent, DialogHeader } from "@adamosuiteservices/ui/dialog";

// Use in your app
function App() {
  return (
    <div>
      <Button variant="default">Click me</Button>
      <Input placeholder="Enter text" />
    </div>
  );
}

Key features

• ✅ 49+ production-ready components (UI + Layout)
• ✅ Built-in accessibility (ARIA attributes, keyboard navigation)
• ✅ Dark mode support across all components
• ✅ Type-safe with full TypeScript definitions
• ✅ Customizable through className prop and CSS variables
• ✅ Zero style conflicts using adm: prefix internally
• ✅ Tree-shakeable with individual component imports

Resources

• Component documentation
• Storybook examples
• AI development guide
• Color system guide