Usage

Frontend UI exposes various components as well as the ability to create your own styled components while exposing the theme variables such as font sizes, colors and more. Because of the stuff under the frunk (Stitches), we are able to use intellisense for theme properties without having to interpolate strings.

import {
  styled,
  css,
  darkThemeClass,
  Text
} from '@streamelements/frontend-ui';

const Root = styled('div', {
  backgroundColor: '$brandPrimaryMain', // Automatically replaced for you
  borderRadius: 8,
  padding: 20
});

const AlteredHeading = styled(Text.Heading, {
  color: '$textPrimary50'
});

export function App() {
  return <Root className={darkThemeClass}>
    <AlteredHeading weight="bold" level={3}>Hello world</AlteredHeading>
  </Root>;
}