Fleetbase Ember UI
The component library behind the Fleetbase console — layout, data, forms, calendars and modals for Ember applications and Fleetbase extensions.
Documentation · Playground · Playground guide · Contributing
Documentation
The reference documentation lives at fleetbase.io/docs/ui — every argument, every yielded block, and the guidance on when to reach for which component.
The playground is its interactive companion: each documented component has a page where you change arguments and watch the real component react.
Installation
pnpm add @fleetbase/ember-ui
Requires Node 18 or newer. The addon brings its own styles; no additional CSS import is needed.
Usage
Components resolve like any other Ember component once the addon is installed:
<Layout::Container>
<Layout::Header />
<Layout::Sidebar />
<Layout::Main>
<ContentPanel @title="Orders" @open={{true}}>
<Table @columns={{this.columns}} @rows={{this.orders}} @selectable={{true}} />
</ContentPanel>
<Button @type="primary" @text="New order" @icon="plus" @onClick={{this.createOrder}} />
</Layout::Main>
</Layout::Container>
Services are injected the usual way:
import { inject as service } from '@ember/service';
export default class OrdersController extends Controller {
@service modalsManager;
@action confirmDelete(order) {
return this.modalsManager.confirm({
title: 'Delete this order?',
body: `${order.reference} will be removed permanently.`,
confirm: () => order.destroyRecord(),
});
}
}
Components
The documented surface is 63 components. Each links to its reference page and to a live, editable example.
Layout & Structure — 17 components
| Component | Docs | Playground |
|---|---|---|
<Layout::Container /> | docs | try it |
<Layout::Header /> | docs | try it |
<Layout::Sidebar /> | docs | try it |
<Layout::Main /> | docs | try it |
<Layout::Section /> | docs | try it |
<Layout::MobileNavbar /> | docs | try it |
<ContentPanel /> | docs | try it |
<Overlay /> | docs | try it |
<Drawer /> | docs | try it |
<Layout::Resource::Tabular /> | docs | try it |
<Layout::Resource::Card /> | docs | try it |
<Layout::Resource::CardsGrid /> | docs | try it |
<Layout::Resource::Panel /> | docs | try it |
<Floating /> | docs | try it |
<Attach::Tooltip /> | docs | try it |
<Attach::Popover /> | docs | try it |
<Spacer /> | docs | try it |
Navigation — 3 components
| Component | Docs | Playground |
|---|---|---|
<TabNavigation /> | docs | try it |
<Tabs /> | docs | try it |
<DropdownButton /> | docs | try it |
Buttons & Actions — 3 components
| Component | Docs | Playground |
|---|---|---|
<Button /> | docs | try it |
<ClickToCopy /> | docs | try it |
<ClickToReveal /> | docs | try it |
Forms & Inputs — 15 components
| Component | Docs | Playground |
|---|---|---|
<InputGroup /> | docs | try it |
<Checkbox /> | docs | try it |
<Toggle /> | docs | try it |
<Select /> | docs | try it |
<MultiSelect /> | docs | try it |
<ComboBox /> | docs | try it |
<ModelSelect /> | docs | try it |
<DatePicker /> | docs | try it |
<DateTimeInput /> | docs | try it |
<PhoneInput /> | docs | try it |
<CoordinatesInput /> | docs | try it |
<ModelCoordinatesInput /> | docs | try it |
<UnitInput /> | docs | try it |
<MoneyInput /> | docs | try it |
<FileUpload /> | docs | try it |
Data Display — 9 components
| Component | Docs | Playground |
|---|---|---|
<Table /> | docs | try it |
<Badge /> | docs | try it |
<Pill /> | docs | try it |
<ProgressBar /> | docs | try it |
<Spinner /> | docs | try it |
<Timeline /> | docs | try it |
<ActivityLog /> | docs | try it |
<File /> | docs | try it |
<CommentThread /> | docs | try it |
Calendars & Boards — 3 components
| Component | Docs | Playground |
|---|---|---|
<FullCalendar /> | docs | try it |
<EventCalendar /> | docs | try it |
<Kanban /> | docs | try it |
Modals — 9 components
| Component | Docs | Playground |
|---|---|---|
<Modal::Default /> | docs | try it |
<Modal::Layouts::Confirm /> | docs | try it |
<Modal::Layouts::Alert /> | docs | try it |
<Modal::Layouts::Prompt /> | docs | try it |
<Modal::Layouts::BulkAction /> | docs | try it |
<Modal::Layouts::Progress /> | docs | try it |
<Modal::Layouts::Process /> | docs | try it |
<Modal::Layouts::Loading /> | docs | try it |
<Modal::Layouts::OptionPrompt /> | docs | try it |
Builders — 2 components
| Component | Docs | Playground |
|---|---|---|
<ReportBuilder /> | docs | try it |
<TemplateBuilder /> | docs | try it |
The addon exports more components than this — table cells, chat internals, builder sub-components and other implementation details. Those are deliberately undocumented: they are internal to the components above and are not covered by the documentation, the playground, or any compatibility promise.
Playground
Built from this addon's own dummy application, so it renders the real components through normal Ember resolution with the real addon styles.
pnpm start # http://localhost:4200
pnpm run build:playground # static GitHub Pages artifact into playground-dist/
| Route | Purpose |
|---|---|
/components | Searchable, categorized catalog |
/components/:slug | Full page: controls, presets, event log, usage snippet |
/embed/:slug | Minimal iframe view, embedded by the documentation site |
Argument state is carried in one encoded query parameter, so a configured example is a shareable link and the embed shows exactly what the full page shows.
See PLAYGROUND.md for the architecture, the registry schema, how to add an example, iframe integration and resize messaging, and how to update the documented allowlist when fleetbase.io/docs/ui changes.
Development
pnpm install --frozen-lockfile
pnpm start # serve the playground / dummy app
pnpm test # lint + the full suite
pnpm run test:ember # the suite on its own
pnpm run lint # eslint, ember-template-lint, stylelint
pnpm run build # production build
Run a subset while working on one component:
pnpm exec ember test --filter="Integration | Component | button"
Testing and coverage
The suite runs in headless Chrome through Testem. Coverage is gated at 100% of first-party
addon/ source — statements, branches, functions and lines — and enforced in CI:
pnpm run test:coverage # run the suite with coverage
pnpm run coverage:check # enforce the gate
Contributing
See the Contributing guide.
License
Licensed under the GNU Affero General Public License v3.0 or later.