pub package Null Safety

CI GitHub Tag New Commits Last Commits Pull Requests Code size License

Bones_UI - A simple and easy Web User Interface framework for Dart.


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 = MyRoot(querySelector('#output'));

// `Bones_UI` root.
class MyRoot extends UIRoot {
  MyRoot(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(
        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</span>'

// 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).

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 [...]