@instructure/ui-elements

---

category: packages

ui-elements

Installation

yarn add @instructure/ui-elements

Usage

import React from 'react'
import Avatar from '@instructure/ui-elements/lib/components/Avatar'

export default MyAvatar = function () {
  return (
    <Avatar name="Kyle Montgomery" />
  )
}

Components

The ui-elements package contains the following:

• Avatar
• Badge
• ContextBox
• Heading
• Img
• Link
• List
• MetricsList
• Pill
• Progress
• Rating
• Spinner
• Table
• Tag
• Text

Contribute

See the contributing guidelines for details.

License

MIT

Changelog

5.0.0 (2018-03-29)

Upgrade Guide

The easiest way to upgrade is to run yarn upgrade --scope @instructure. Once you've done this, make sure you check the 'BREAKING CHANGES' section below so that you can make those changes as necessary.

After upgrading you should see deprecation warnings in dev and test environments that will help you prepare for future releases (or check out the 'Deprecations' section below). The ui-codemods scripts should make it easy to update your import/require statements to get rid of a lot of the warnings. Note: you'll need to update your package.json file manually to add the new packages.

Note though, that it's not necessary to upgrade everything at once. Depending on the size of your application you may want to upgrade a package (or component) at a time. This is a major release, but in this case it's safe to do that.

Release Highlights

Breaking up is hard to do: Goodbye, ui-core!

We have broken ui-core into smaller packages like ui-breadcrumb, ui-buttons, and ui-container. This change is intended to make consuming Instructure UI components easier by allowing applications to only import and update the packages they need. You're welcome.