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:
yarn add twitch-core-ui react-router-dom
- 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.