id: instructure-ui


build-status MIT License Code of Conduct


Instructure-UI has a number of beautiful and accessible React components with baked-in styles and theming and helpful utility functions.

To start using Instructure-UI React components, you must do the following:

  1. Activate a style theme.
  2. Import and render an Instructure-UI component.

To get the default styles as shown in the examples, use the pre-built Canvas theme.


$ yarn add @instructure/ui-themes @instructure/ui-elements
import React, { Component } from 'react'
import '@instructure/canvas-theme'

import { Heading } from '@instructure/ui-elements'

class App extends Component {
  render() {
    return (
      <div className="App">
        <Heading>Now using Instructure-UI components with default Canvas theme!</Heading>

export default App


Before contributing please read our code of conduct and read the docs/contributing documentation.

React Support

Instructure-UI currently supports React 15 and higher.

Browser Support