IconLogoMark
IconUiExpandCollapseDown

Release NotesIconUiExpandCollapseDown

ComponentsIconUiExpandCollapseDown

GuidelinesIconUiExpandCollapseDown

PatternsIconUiExpandCollapseDown

WordsIconUiExpandCollapseDown

ResourcesIconUiExpandCollapseDown

Get Started

/

Code

Introduction

Uniform is Hudl’s design system. It exists to unify Hudl’s products through design () and code () implementation.

The system includes components, visual guidelines, language and additional resources to help you build more cohesive product interfaces.

Installation

Uniform is built with web in mind, but other platform components are being added all the time. Choose your platform for setup instructions.

Web
React Native
Android
Apple

Uniform is automatically distributed through our UI system for easy setup and maintenance. Every current and future Hudl repo will be setup automatically.

React

Our full suite of components is built in React and is the preferred method for building interfaces.

  1. Adding Uniform to your repo:
    npm install @hudl/uniform-ui-components
    
  2. Use any component snippets, like text, to get started.

CSS Styling

The CSS included on every page includes variables for things like space, color, and z-indexes. Reference Uniform variables, like colors, to get started. Other styling helpers like classes are available on the code helpers page.