@synthaxai/ui
v1.4.1
Published
Production-quality UI component library for Synthax healthcare applications
Maintainers
Readme
@synthaxai/ui
A production-quality Svelte 5 component library built for healthcare applications.
synthax.ai — AI Agents for Healthcare
Installation
npm install @synthaxai/uiPeer dependencies: svelte ^5.0.0 · lucide-svelte ^0.400.0
Quick Start
/* Import design tokens */
@import '@synthaxai/ui/styles';<script>
import { Button, Card, TextInput, Alert } from '@synthaxai/ui';
</script>
<Card>
<Alert variant="info">Patient record updated</Alert>
<TextInput label="Patient Name" bind:value={name} />
<Button variant="primary">Save</Button>
</Card>Components
| Category | Components | |----------|------------| | Primitives | Button, Badge | | Forms | TextInput, Textarea, Select, Checkbox, RadioGroup, FormField, SearchInput, MultiSelect, DatePicker | | Feedback | Alert, Toast, Spinner, ProgressBar, Skeleton, EmptyState | | Layout | Card, Container | | Data Display | DataTable, StatCard | | Navigation | StepIndicator | | Dialogs | Modal, ConfirmDialog |
Tree-shakeable Imports
<script>
import { Button } from '@synthaxai/ui/primitives';
import { TextInput } from '@synthaxai/ui/forms';
import { Modal } from '@synthaxai/ui/dialogs';
</script>Features
- Svelte 5 — Built with runes and snippets
- TypeScript — Full type definitions
- Accessible — WCAG 2.1 AA, screen reader support, focus management
- Dark Mode — System preference + manual toggle via
data-theme - Reduced Motion — Respects
prefers-reduced-motion - E2E Ready — All components support
testIdprop
Theming
<!-- Automatic (follows system) -->
<html>
<!-- Force dark mode -->
<html data-theme="dark">
<!-- Force light mode -->
<html data-theme="light">License
Proprietary — Synthax
