twitch-core-ui1 v32.0.0

Core UI

Twitch Core UI is a front-end library that provides:

• React (and non-react) components
• CSS variables and utilities for theming, color, spacing, and typography
• and, an icon library

The goal of Core UI is to ensure usability, accessibility, and performance across the Twitch platform while making it easier for designs and developers to build scalable solutions.

Visit our Design System Site for more information on designing and building interfaces at Twitch.

Quickstart

Starting with a blank new Create React App, you can add Core UI with these steps:

1. yarn add twitch-core-ui react-router-dom
2. Use Core UI in your app.js file like this:

// This imports the entire Core UI CSS bundle
import "twitch-core-ui/css/index.css";
import { Button, SVGAsset } from "twitch-core-ui";

class App extends Component {
  render() {
    return <Button icon={SVGAsset.Wrench}>Hello World</Button>;
  }
}

For more advanced usage, see below.

Exports

JS

This package comes with several different JS exports to adapt to the needs of various applications, with the appropriate keys added to package.json so that consumers' tooling/environment can automatically choose the most appropriate version:

• dist/index.js is the main ES5 single bundle entrypoint, useful for legacy applications and node environments
• module/index.js and its siblings is an ES5 + ES modules entrypoint, enabling tree-shaking when consumed via a compatible bundling tool (webpack, rollup, parcel, etc)

Due to the proper configuration of package.json, most consumers don't need to worry about the distinction between these 2 exports and can just use import { foo } from 'twitch-core-ui' or const { foo } = require('twitch-core-ui'). dist and module are (and must be) functionally equivalent to allow proper functionality in a isomorphic javascript application.

CSS

CSS and SCSS exports have been removed from the twitch-core-ui package, they are now available through the twitch-core-ui-scss package.

Types

This package comes with complete type definitions for all components, and TypeScript will automatically find them due to proper configuration.