@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

``bash
npm install @adam-milo/ui
`

Setup

Import styles once in your app entry:

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

Usage

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

function App() {
return (

Submit
Cancel


);
}
`

Components

$3

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

// Variants
Main Orange
Secondary Orange
Secondary Blue

// With icon
}>
Add Item


// Full width

Submit


// Disabled

Disabled

`

$3

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

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

$3

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

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

$3

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

;
`

$3

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

verifyCode(code)} />;
`

$3

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

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

$3

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

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

$3

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

;
`

$3

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






Option 1
Option 2

;
`

$3

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

// Vertical stack (default)



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

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



Card Title

Card content goes here

Action

;
`

$3

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

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



Tab 1
Tab 2

Content 1
Content 2
;
`

$3

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

Operation completed successfully!
Something went wrong.
Please check your input.
Here's some information.
`

$3

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

Page Title
Section Title
Body text content
Secondary text
`

$3

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




`

$3

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

Tag
Outline

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

TypeScript

Full TypeScript support with exported types:

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

const MyButton: React.FC = (props) => {
return ;
};
`

RTL Support

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

`tsx


{/ All components render correctly in RTL /}


`

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:

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

License

MIT