pub package Null Safety Dart CI GitHub Tag New Commits Last Commits Pull Requests Code size License

Bones_UI - An intuitive and user-friendly Web User Interface framework for Dart.


You can use the command-line interface (CLI) bones_ui to create or serve a project:

To activate it globally:

  $> dart pub global activate bones_ui

Now you can use the CLI directly:

  $> bones_ui --help

To run Bones_UI unit tests in your project:

  $> bones_ui test
  • See bones_ui test --help for more information.

To show the Bones_UI project template information:

  $> bones_ui info

To create a Bones_UI project from the default template:

  $> bones_ui create -o /path/to/workspace -p project_name_dir=simple_project -p "project_name=Simple Project"


A simple usage example:

import 'dart:html';

import 'package:bones_ui/bones_ui_kit.dart';

void main() async {
  // Create `bones_ui` root and initialize it:
  var root = MyUIRoot(querySelector('#output'));

// `Bones_UI` UI root.
class MyUIRoot extends UIRoot {
  MyUIRoot(Element? rootContainer) : super(rootContainer);

  MyMenu _menu;
  MyHome _home;

  void configure() {
    _menu = MyMenu(content);
    _home = MyHome(content);

  // Returns the menu component.
  UIComponent renderMenu() => _menu;

  // Returns the content component.
  UIComponent renderContent() => _home;

// Top menu.
class MyMenu extends UIComponent {
  MyMenu(Element parent) : super(parent);

  // Renders a fixed top menu with a title.
  dynamic render() {
    return $div(
        classes: 'menu',
        style: 'position: fixed; top: 0; left: 0; width: 100%; background-color: black; color: white; padding: 10px',
        content: '<span style="font-size: 120%; font-weight: bold">Bones_UI: '
            '<a hrf="#register">Register</a> | '
            '<a hrf="#login">Login</a>'

// The `home` component.
class MyHome extends UIComponent {
  MyHome(Element parent) : super(parent);

  dynamic render() {
    return markdownToDiv(('''
    # Home
    This is a VERY simple example!

Example from Sources

Get the source

  $> git clone

...and see the Web Example (just follow the README file for instructions).

Bones_UI App Example

Also see the App example @ GitHub:

Unite Tests

You can create unit tests for your Bones_UI app.

A Simple example with a login test:

import 'package:bones_ui/bones_ui_test.dart';
import 'package:test/test.dart';

// Import your `UIRoot` class
import '../web/lib/ui_root.dart'; // ignore: avoid_relative_lib_imports

void main() async {
  group('UIRoot', () {
    late MyUIRoot uiRoot;

    setUpAll(() async {
      // Initialize your `UIRoot`:
      uiRoot = await initializeTestUIRoot(;

    tearDownAll(() async {
      await testUISleep(ms: 200);

    test('menu: routes', () async {
      await uiRoot.callRenderAndWait();
      await testUISleep(ms: 100);

      var menu = uiRoot.querySelector('.menu');
      expect(menu, isNotNull);

      var routes = menu!.selectAnchorLinksTargets();

          unorderedEquals(['register', 'login']));

    test('login', () async {
      await uiRoot.callRenderAndWait();
      await testUISleep(ms: 100);

      var menu = uiRoot.querySelector('.menu');
      expect(menu, isNotNull);

      var linkLogin = menu!
          .firstWhere((e) => e.href?.endsWith('#login') ?? false);;

      await testUISleepUntilRoute('login', timeoutMs: 2000, minMs: 100);


      var navigableContent = uiRoot.querySelector('.navigable-content');

      var inputElements = navigableContent!.selectInputElement();

      var emailInput = inputElements.withID('email').first;
      var passInput = inputElements.withID('password').first;

      emailInput.value = '';
      passInput.value = '123456';

      await testUISleep(ms: 100);

      var btnLoginDiv = uiRoot.querySelector('#btn-login');

      await testUISleepUntilRoutes(['home', ''], timeoutMs: 1000, minMs: 100);

      expectUIRoutes(['home', '']);

To run the unit tests, run the CLI in your project directory:

  $> bones_ui test

To see the browser running the tests:

  $> bones_ui test --show-ui

Bootstrap Integration

You can use the Dart package Bones_UI_Bootstrap to activate Bootstrap integration with Bones_UI.

Bones_UI_Bootstrap automatically handles loading of JavaScript libraries and CSS. With it you don't need to add any HTML or JavaScript code to have full integration of Bootstrap with Bones_UI.

Features and bugs

Please file feature requests and bugs at the issue tracker.


This is an open-source project from Colossus.Services: the gateway for smooth solutions.


Graciliano M. Passos: gmpassos@GitHub.


Artistic License - Version 2.0


Bone UI
Bone UI - Kit
Bone UI - Test Tools
Bone UI - Test CLI