LogisBase UI

@logisbase/ember-ui is the official component library for the LogisBase 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 LogisBase feature.

When you scaffold a new extension with flb scaffold, @logisbase/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 LogisBase 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 LogisBase 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