Cycle UI Components library

Downloads in past


0.7.06 years ago6 years agoMinified + gzip package size for @eldarlabs/cycle-ui in KB


circleci build version bitHound Overall Score MIT License semantic-release
A Cycle.js HTML component library.

Demonstration Site

An experimental work in progress conversion of the Material Design react-toolbox components to Cycle.js components. The styles from react-toolbox are written with PostCSS. Future work may define an interface for interchangeable styles.

How to use

The easiest way to get started is to clone the cycle-ui-typescript-webpack starter project. It includes a Cycle-UI kitchen sink demo (demonstration site). Start modifying the starter project or get some ideas for how to use Cycle-UI in your own project.
Note: I want to bring a proposal to Cycle-DOM to allow removal of the .DOM boilerplate.
// Import components you want to use
import { Input, RadioButton } from '@eldarlabs/cycle-ui';

// Use components in your Cycle.js view

return div([
  h3('.example', [`Using Cycle-UI`]),
  Input(sources, {
      label: `Answer to life`,
      maxLength: 50,
  RadioButton(sources, {
    label: 'Radio easy',
    checked: true,


This project is open source so team members can share knowledge and learn from the community. Using this software does not entitle you to any support or right to demand features. See below for how to contribute.


Let is know of any Issues. Pull requests will be considered.

Related projects

  • cycle-ui-typescript-webpack - Cycle.js Starter Project for using Cycle-UI, TypeScript and WebPack.
  • Cycle.js - required to use the Cycle-UI components. Declarative programming with data flow.
  • React Toolbox Components - uses the PostCSS/SASS styles from this library.
  • Snabbdom - a virtual DOM library
  • cycle-snabbdom - a Cycle.js DOM library that uses the Snabbdom virtual DOM.
  • RxJS - Functional, Reactive, Observable streams of data that power Cycle.js
  • TypeScript - Types, Interfaces, static checking and other good stuff.
  • Typings - Trying to make TypeScript Type definitions easier to deal with.
  • Semantic Release - Trying out this tool for streamlining a release.
  • Commitizen - Commit tool that works well with Semantic Release.
The MIT License
Copyright (c) 2016 Eldar Labs