@adam-milo/ui

A modern, accessible React component library built with TypeScript and Tailwind CSS v4. Part of the Adam Milo Design System. Import styles.css once in your app entry.

Installation

npm install @adam-milo/ui

Setup

Import styles once in your app entry:

// main.tsx or App.tsx
import '@adam-milo/ui/styles.css';

Usage

import { Button, Stack, Checkbox } from '@adam-milo/ui';

function App() {
  return (
    <Stack spacing="4">
      <Button variant="main-orange">Submit</Button>
      <Button variant="secondary-blue">Cancel</Button>
      <Checkbox label="I agree to the terms" />
    </Stack>
  );
}

Components

Button

import { Button } from '@adam-milo/ui';

// Variants
<Button variant="main-orange">Main Orange</Button>
<Button variant="secondary-orange">Secondary Orange</Button>
<Button variant="secondary-blue">Secondary Blue</Button>

// With icon
<Button variant="main-orange" icon={<Icon name="PlusIcon" />}>
  Add Item
</Button>

// Full width
<Button variant="main-orange" fullWidth>
  Submit
</Button>

// Disabled
<Button variant="main-orange" disabled>
  Disabled
</Button>

EmailInput

import { EmailInput } from '@adam-milo/ui';

<EmailInput
  label="Email"
  placeholder="Enter your email"
  value={email}
  onChange={(e) => setEmail(e.target.value)}
  error={error}
  helperText="We'll never share your email"
/>;

PasswordInput

import { PasswordInput } from '@adam-milo/ui';

<PasswordInput
  label="Password"
  placeholder="Enter your password"
  value={password}
  onChange={(e) => setPassword(e.target.value)}
  error={error}
/>;

PhoneInput

import { PhoneInput } from '@adam-milo/ui';

<PhoneInput label="Phone Number" value={phone} onChange={setPhone} defaultCountry="IL" />;

OTPInput

import { OTPInput } from '@adam-milo/ui';

<OTPInput length={6} value={otp} onChange={setOtp} onComplete={(code) => verifyCode(code)} />;

Checkbox

import { Checkbox } from '@adam-milo/ui';

<Checkbox
  label="I agree to the terms"
  checked={checked}
  onChange={(e) => setChecked(e.target.checked)}
/>;

Radio

import { Radio } from '@adam-milo/ui';

<Radio
  name="plan"
  label="Basic Plan"
  value="basic"
  checked={plan === 'basic'}
  onChange={(e) => setPlan(e.target.value)}
/>;

Toggle

import { Toggle } from '@adam-milo/ui';

<Toggle label="Enable notifications" checked={enabled} onChange={setEnabled} />;

Select

import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@adam-milo/ui';

<Select value={value} onValueChange={setValue}>
  <SelectTrigger>
    <SelectValue placeholder="Select option" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="option1">Option 1</SelectItem>
    <SelectItem value="option2">Option 2</SelectItem>
  </SelectContent>
</Select>;

Stack

import { Stack } from '@adam-milo/ui';

// Vertical stack (default)
<Stack spacing="4">
  <div>Item 1</div>
  <div>Item 2</div>
</Stack>

// Horizontal stack
<Stack direction="horizontal" spacing="4">
  <div>Item 1</div>
  <div>Item 2</div>
</Stack>

Grid

import { Grid } from '@adam-milo/ui';

<Grid columns={3} gap="4">
  <div>Cell 1</div>
  <div>Cell 2</div>
  <div>Cell 3</div>
</Grid>;

Card

import { Card, CardHeader, CardTitle, CardContent, CardFooter } from '@adam-milo/ui';

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
  </CardHeader>
  <CardContent>Card content goes here</CardContent>
  <CardFooter>
    <Button>Action</Button>
  </CardFooter>
</Card>;

Dialog

import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
} from '@adam-milo/ui';

<Dialog>
  <DialogTrigger asChild>
    <Button>Open Dialog</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Dialog Title</DialogTitle>
      <DialogDescription>Dialog description here.</DialogDescription>
    </DialogHeader>
    <p>Dialog content</p>
  </DialogContent>
</Dialog>;

Tabs

import { Tabs, TabsList, TabsTrigger, TabsContent } from '@adam-milo/ui';

<Tabs defaultValue="tab1">
  <TabsList>
    <TabsTrigger value="tab1">Tab 1</TabsTrigger>
    <TabsTrigger value="tab2">Tab 2</TabsTrigger>
  </TabsList>
  <TabsContent value="tab1">Content 1</TabsContent>
  <TabsContent value="tab2">Content 2</TabsContent>
</Tabs>;

Alert

import { Alert } from '@adam-milo/ui';

<Alert variant="success">Operation completed successfully!</Alert>
<Alert variant="error">Something went wrong.</Alert>
<Alert variant="warning">Please check your input.</Alert>
<Alert variant="info">Here's some information.</Alert>

Heading & Text

import { Heading, Text } from '@adam-milo/ui';

<Heading level="h1" size="xl">Page Title</Heading>
<Heading level="h2" size="lg">Section Title</Heading>
<Text size="md">Body text content</Text>
<Text size="sm" color="secondary">Secondary text</Text>

Spinner

import { Spinner } from '@adam-milo/ui';

<Spinner size="sm" />
<Spinner size="md" />
<Spinner size="lg" />

Chip

import { Chip, ChipGroup } from '@adam-milo/ui';

<Chip>Tag</Chip>
<Chip variant="outline">Outline</Chip>

<ChipGroup
  items={[
    { id: '1', label: 'Option 1' },
    { id: '2', label: 'Option 2' },
  ]}
  selected={selected}
  onSelectionChange={setSelected}
/>

TypeScript

Full TypeScript support with exported types:

import { Button, type ButtonProps } from '@adam-milo/ui';

const MyButton: React.FC<ButtonProps> = (props) => {
  return <Button {...props} />;
};

RTL Support

Components support RTL out of the box using CSS logical properties:

<html dir="rtl">
  <body>
    <App /> {/* All components render correctly in RTL */}
  </body>
</html>

Accessibility

All components are WCAG AA compliant with:

• Semantic HTML elements
• Proper ARIA attributes
• Keyboard navigation
• Focus management
• Screen reader support

Tree Shaking

Import only what you need - unused components are automatically removed:

// Only Button code is included in your bundle
import { Button } from '@adam-milo/ui';

License

MIT