Skip the navigation

Quick Start (Web)

The following info will help you get Caesars UI setup in your project.

Node Package @caesars-ui/core

Caesars UI has an official Node Package hosted in Nexus.

Install it using the following:

npm install @caesars-ui/core

And for the sportsbook package

npm install @caesars-ui/sbk

The sbk package is an optional install, only install it if you need sbk components

Note, please make sure you've scoped the @caesars-ui registry in your .npmrc for more help for this see npm Docs. Also, you will need to be logged into your VPN.

Getting a registry error? If you're unable to scope the registry via .npmrc, try the following command npm config set @caesars-ui:registry https://example-only-please-use-real-url.registry.dtc/



Importing Tokens

In order to use our tokens, you'll have to import them into your project. Wherever your project cares about global CSS, import this file:

@caesars-ui/core/dist/tokens/css/caesars-ui-tokens.css

In JS

import "@caesars-ui/core/dist/tokens/css/caesars-ui-tokens.css"; // Some react app entry point file

or via CSS

@import "~/node_modules/@caesars-ui/core/dist/tokens/css/caesars-ui-tokens.css"; // Actual path may vary

You will then have access to the core tokens as well as the semantic tokens. Each set of semantic tokens (themes) lives in this file scoped to a class, such as .czr-dark. This allows you to set themes for the entire project as well as being able to apply a theme within a specific element and it's children.

<body class="czr-dark"> // Switch theme project wide by changing this class
   ...
   // Entire project will have czr-dark classes applied.
   <div class="wh-light">
       // This element overrides the globally set theme and will only have 
       // William Hill light classes applied to this block element and it's children.
   </div>
</body>


Importing Component CSS

Our component library has it's own CSS output that needs to be loaded as well for it to display correctly. This should also be imported globally. The CSS in this file is namespaced and should not interfere with already established classes. This is file can be imported from:

@caesars-ui/core/dist/css/caesars-ui.css



Using Components

Using a component is as simple as importing it directly from the Caesars UI package: 

import React from "react";
import { Button } from "@caesars-ui/core";


export const Feature = (props) => {
    return (
    <div>
        <Button handleClick={/* Click Handler */}>Deposit</CzrButton>
    </div>
    )
}