UI Components that work seamlessly in multiple UI frameworks

• HTML Components Components are based on Web Component APIs at the core. This means they are compatible with any modern browser and framework.

• React & Angular 1.x Adapters are available out of the box. This means developers will not know they are using Web Components under the hood.

• Rigorously Tested All components have unit, integration, and visual regression tests baked in. All upgrades can be done without API breaks and knowing exactly how the components have changed.

We have several examples on the website. Here is a simple example of using Orion in React.js:

import React from 'react';
import ReactDOM from 'react-dom';
import Button from '@orion-ui/react-components/lib/2016-12-01/button';

class HelloMessage extends React.Component {
  render() {
    return <div>Hello <Button>{this.props.name}</Button>;
  }
}

ReactDOM.render(
  <HelloMessage name="John" />,
  document.getElementById('container')
);

This example will render "Hello John" into the page and the button will be perfectly styled and look the same between any framework which uses an Orion button.

Orion is available in a few different packages on npm:

• @orion-ui/react-components is the react library
• @orion-ui/angular is the angular 1.x library
• @orion-ui/components is the vanilla web component library

We recommend using a bundler liked webpack or browserify to consume the orion libraries. See the sample applications on the marketing site for fully functioning integrations.

The Orion project is meant to evolve with feedback - the project and its users greatly appreciate any thoughts on ways to improve the design or features. Read below to see how you can take part and contribute:

Autodesk has adopted a Code of Conduct that we expect everyone who participates to adhere to. Please read the full text so that you can understand all the details.

Read our guide to learn about the development process and how to work with the core team.

Orion is Apache-2.0 licensed