Hex doc
Phoenix
Preview
Semantic
Use class="ui-{role}" to set the semantic palette of a timer.
Available options: accent, alert, brand, info, success
Size
Use class="ui-size-{size}" to set the size of a timer.
Available options: xs, sm, md (default), lg, xl
Rounded
Use class="ui-rounded-{step}" to set the corner radius of a timer.
Available options: none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, full (default)
Width
Without w-*, width comes from component CSS. Default for timer: none (width: fit-content).
Use class="w-{step}" to set the host stretch mode of a timer (`w-full`, `w-fit`); use Max width for named container steps.
Available options: default (fit-content), full, fit
Max width
Without max-w-*, width comes from component CSS. Default for timer: none (width: fit-content).
Use class="max-w-{step}" to show a capped full-width control on fit-content hosts (pair w-full with max-w-* and wide content when labels are short).
Available options: none (default), full, 9xs, 8xs, 7xs, 6xs, 5xs, 4xs, 3xs, 2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl, 8xl, 9xl