Iris

A Clear Channel Outdoor display component library

Storybook

---

Access our Storybook to preview Iris components, design tokens and documentation

https://clearchanneloutdoor.github.io/iris/

NextJS Component Usage Example

Install the Iris package:

npm install @clearchannel/iris

Use the CCOThemeProvider where required:

/* pages/_app.jsx */

import { CCOThemeProvider } from '@clearchannel/iris'

const NextApp = ({ Component, pageProps }) => (
  <CCOThemeProvider>
    <Component {...pageProps} />
  </CCOThemeProvider>
)

export default NextApp

To utilize Iris components or design tokens, the import shortcut is denoted by @clearchannel/iris:

Note: Our recommendations for styling components include techniques such as styled() or the sx prop. However, there are other options in MUI 5 that are available for customization: https://mui.com/customization/how-to-customize/

/* pages/index.jsx */

import { Button, palette } from '@clearchannel/iris'

const Index = () => (
  <Button
    style={{
      color: palette.brand.background,
    }}
  >
    Click Me
  </Button>
)

export default Index