Adam Milo Design System - UI Component Library
npm install @adam-milo/uiA 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.
``bash`
npm install @adam-milo/ui
Import styles once in your app entry:
`tsx`
// main.tsx or App.tsx
import '@adam-milo/ui/styles.css';
`tsx
import { Button, Stack, Checkbox } from '@adam-milo/ui';
function App() {
return (
);
}
`
`tsx
import { Button } from '@adam-milo/ui';
// Variants
// With icon
}>
Add Item
// Full width
// Disabled
`
`tsx
import { EmailInput } from '@adam-milo/ui';
placeholder="Enter your email"
value={email}
onChange={(e) => setEmail(e.target.value)}
error={error}
helperText="We'll never share your email"
/>;
`
`tsx
import { PasswordInput } from '@adam-milo/ui';
placeholder="Enter your password"
value={password}
onChange={(e) => setPassword(e.target.value)}
error={error}
/>;
`
`tsx
import { PhoneInput } from '@adam-milo/ui';
`
`tsx
import { OTPInput } from '@adam-milo/ui';
`
`tsx
import { Checkbox } from '@adam-milo/ui';
checked={checked}
onChange={(e) => setChecked(e.target.checked)}
/>;
`
`tsx
import { Radio } from '@adam-milo/ui';
label="Basic Plan"
value="basic"
checked={plan === 'basic'}
onChange={(e) => setPlan(e.target.value)}
/>;
`
`tsx
import { Toggle } from '@adam-milo/ui';
`
`tsx
import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@adam-milo/ui';
;
`
`tsx
import { Stack } from '@adam-milo/ui';
// Vertical stack (default)
Item 1
Item 2
// Horizontal stack
Item 1
Item 2
`
`tsx
import { Grid } from '@adam-milo/ui';
Cell 1
Cell 2
Cell 3
`
`tsx
import { Card, CardHeader, CardTitle, CardContent, CardFooter } from '@adam-milo/ui';
`
`tsx
import {
Dialog,
DialogTrigger,
DialogContent,
DialogHeader,
DialogTitle,
DialogDescription,
} from '@adam-milo/ui';
;
`
`tsx
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@adam-milo/ui';
`
`tsx
import { Alert } from '@adam-milo/ui';
`
`tsx
import { Heading, Text } from '@adam-milo/ui';
`
`tsx
import { Spinner } from '@adam-milo/ui';
`
`tsx
import { Chip, ChipGroup } from '@adam-milo/ui';
{ id: '1', label: 'Option 1' },
{ id: '2', label: 'Option 2' },
]}
selected={selected}
onSelectionChange={setSelected}
/>
`
Full TypeScript support with exported types:
`tsx
import { Button, type ButtonProps } from '@adam-milo/ui';
const MyButton: React.FC
return ;
};
`
Components support RTL out of the box using CSS logical properties:
`tsx`
All components are WCAG AA compliant with:
- Semantic HTML elements
- Proper ARIA attributes
- Keyboard navigation
- Focus management
- Screen reader support
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';
MIT