Component Libraries
UI component inventories across all platforms. Each platform provides a themed component library that you use instead of raw framework primitives — ensuring consistent UX and automatic white-label theming support.
Flutter — E11 UI Library (140+ Components)
Packages: ui, ui_charts, ui_rich_text
The most comprehensive library, covering 24 categories:
| Category | Count | Key Components |
|---|---|---|
| Buttons | 9 | Btn, PrimaryBtn, E11SecondaryBtn, E11TextBtn, E11IconBtn, E11MediaIconBtn, BackBtn |
| Form | ~30 | Autocomplete, date pickers, dropdowns, international phone field, sliders, switches, text fields |
| Screens | 9 | E11Screen, E11Sheet, E11ErrorScreen, E11LoadingScreen, E11GradientScreen |
| Dialogs | 4 | E11Dialog, ConfirmDialog, ConfirmDeleteDialog, E11ActionSheet |
| Tiles | 7 | Tile, RawTile, E11ExpandableTile, TileAppBar |
| Slivers | 10 | AppBarSliver, ListSliver, NestedTabMenuSliver, PersistentSliver |
| Menus | 9 | PopupMenuBtn, TabMenu, TabMenuBtn, CountTabMenuBtn |
| Media | 5 | E11Avatar, E11AvatarPicker, E11Image, E11VideoImage |
| Loaders | 11 | E11Loading, E11LoadingOverlay, skeleton system (SkeletonContainer, SkeletonLines, SkeletonListView) |
| Badges | 3 | E11Badge, E11CountBadge, E11ErrorBadge |
| Views | 9 | E11DotsIndicator, E11StepIndicator, EmptyState, TipsCarousel |
| Network | 5 | NetworkInfoConsumer, OfflineBanner, WifiConditional |
Complex modules: App bar with search, date range picker, emoji picker with skin tones, form wrapper, multi-select picker, QR code scanner, single-select with search.
Additional packages:
ui_charts— Pie chart, stacked bar chart, progress bar, timeline chart, legendui_rich_text— Markdown renderer, Quill rich text editor with mentions, bidirectional format converters (HTML ↔ Quill, Markdown ↔ Quill)
Providers: 9 InheritedWidget-based providers (DI, navigation, errors, logger, toast, network, user ID, root navigator, UI config).
Transitions: 13 route transition types including sheet, drawer, dialog, fade, blur, gallery, and slide.
Angular — @engineering11/ui-lib (~65 Components)
Custom e11- prefixed components with secondary entry points for tree-shaking. No Angular Material dependency.
| Category | Count | Key Components |
|---|---|---|
| Forms / Inputs | 14 | e11-input, e11-textarea, e11-select, e11-multi-select, e11-autocomplete, e11-phone-number, e11-date-picker, e11-switch |
| Layout | 10 | e11-panel, e11-card, e11-side-over, e11-sidesheet, e11-nav-left, e11-nav-horizontal, e11-menu-mega |
| Feedback | 8 | e11-alert, e11-toast, e11-notification, e11-badge, e11-tooltip, e11-popover, e11-confirmation |
| Data Display | 7 | e11-datatable, e11-tabs, e11-chart-percentage, e11-pagination, e11-countdown |
| Media | 7 | e11-avatar, e11-profile-pic, e11-image-cropper, e11-image-viewer, e11-carousel |
| Buttons / Actions | 4 | e11-button, e11-cta, e11-chip, e11-dropdown |
| Loaders | 5 | e11-loader, e11-loader-dots, e11-loader-ellipsis, e11-loader-line, e11-loader-skeleton |
| Overlay | 2 | e11-modal, e11-backdrop |
| Rich Text | 2 | e11-text-editor, e11-markdown-editor |
| Utilities | 6 | e11-ui-config, e11-directives, e11-animations, e11-empty-state, e11-title-bar |
Theme packages: Product-specific theme packages provide static design tokens per brand (e.g. ui-theme-{product}).
Documentation: No Storybook setup exists currently.
React (Web) — @engineering11/react-ui-components (~45 Components)
Built on Radix UI primitives with Tailwind v4 and CVA (class-variance-authority).
| Category | Key Components |
|---|---|
| Form Controls | button, checkbox, input, textarea, select, radio-group, switch, toggle, slider, password-input, phone-input, calendar |
| Layout | card, separator, accordion, collapsible, tabs, panel, scroll-area |
| Overlays | dialog, alert-dialog, confirmation-dialog, sheet, popover, dropdown-menu, tooltip |
| Feedback | alert, badge, skeleton, empty-state, sonner (toasts) |
| Navigation | breadcrumb, app-sidebar, sidebar, link |
| Data Display | avatar, table, code-block |
| Rich Content | text-editor (toolbar, mentions, attachments), emoji-picker, image-crop |
| Utility | command, forms, label, multiple-selector, search-form |
Storybook: 38 documented stories at apps/storybook, deployed to Firebase Hosting with a11y testing and Chromatic visual regression.
React Native — @engineering11/rn-ui-components (~35+ Components)
E11-prefixed components themed via useE11Theme() inline styles. No NativeWind dependency.
| Category | Key Components |
|---|---|
| Core UI | E11Button, E11Input, E11Text, E11Card, E11View, E11Icon, E11Loader, E11Skeleton, E11Toggle |
| Forms | E11PasswordInput, E11PhoneInput, E11FormBuilder, form controls (checkbox, picker, select, text-field) |
| Overlays | E11Modal, E11DropdownMenu, E11Toast, E11BottomSheet |
| Layout | E11Scaffold, E11Scrollable, E11TabMenu, E11Tile |
| Feedback | E11EmptyState, E11SearchBar, E11FloatingButton |
| Other | E11DateTimePicker, E11HtmlText, E11Hero, E11ThemePicker |
| Presentations | Avatar, Badge, ActivityIndicator, Image, AnimatedView |
On-device Storybook: 13 component stories viewable in the mobile app.
Next Steps
- Frontend SDKs — Foundation SDK package catalogs
- Theming — How the theme system works
- Platforms — Platform-specific deep dives