Fleetbase UI

@fleetbase/ember-ui is the official component library for the Fleetbase Console. It is a core Ember.js addon that ships with every extension and provides the components, helpers, modifiers, and services you need to build a UI that looks and behaves like a native Fleetbase feature.

When you scaffold a new extension with flb scaffold, @fleetbase/ember-ui is already declared as a dependency — you don't need to install it manually.

What's Included

What You Build With It

Extensions use ember-ui to render the entire surface area of a Fleetbase feature:

• Console pages — list views, detail views, settings panels
• Modals — confirmation dialogs, edit forms, multi-step wizards
• Forms — input groups, validation, model selects, file uploads
• Tables — sortable, filterable, paginated resource grids
• Builders — drag-and-drop report and template editors
• Dashboards — KPI widgets, charts, activity feeds

Quick Example

A typical Fleetbase form built with ember-ui components:

<ContentPanel @title="Driver Details" @open={{true}}>
  <InputGroup @name="Name" @value={{@driver.name}} @required={{true}} />

  <InputGroup @name="Phone">
    <PhoneInput @value={{@driver.phone}} />
  </InputGroup>

  <InputGroup @name="Vehicle">
    <ModelSelect
      @modelName="vehicle"
      @selectedModel={{@driver.vehicle}}
      @onChange={{fn (mut @driver.vehicle)}}
    />
  </InputGroup>

  <div class="flex justify-end">
    <Button
      @type="primary"
      @icon="save"
      @text="Save"
      @onClick={{this.saveDriver}}
    />
  </div>
</ContentPanel>

Browse the Library