Components are how we assemble tokens into functional, repeatable UI elements. We use a mix of libraries and custom components to cover situations involving content, user interaction, data visualization, and more.
Custom Components
HeroUI is a great library, but it doesn't have everything we need. We have built out numerous custom components to fill in the gaps.
Binary Choice
<BinaryChoice />Used to select between two options. In forms, replaces a single-choice textbopx with something clearer to the user.
Options
size: "small" | "large"Controls padding between elements. Leaving this blank uses default spacing.
width: "stretch" | "auto"Controls width of the component. auto will use the width of the content, stretch will use the full width of the parent container.
HeroUI Extensions
We have also extended multiple HeroUI components to ensure default behavior, color, and style matches our brand across all platforms. All extended hero components are prefixed with CC to make them easy to identify and use. All slots, variants, and options from the default Hero component are available, along with the extensions and new defaults we've set.
Default Button
<CCButton />Used throughout the site, it's important to make sure button use is consistent with our theme and indicative to the user the type of action a button press will perform.
HeroUI Reference
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
| 29 | 30 | 31 | 1 | 2 | 3 | 4 |
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 | 1 | 2 |
| Name | Pretend job | Are they cool? |
|---|---|---|
| Max Fronek | Head of Design | Nope |
| James Stewart | Whiskey Enthusiast | Sometimes |
| Matt Ashley | Elk Maestro | Only during hunting season |
| Josh Folsom | Technical Wizard | Always |