Components

The same components in React (enma/react) and as plain HTML classes (enma/css). Every page has a live demo, the component in all six themes, guidance, copyable code and a props table generated from the TypeScript types.

EnmaRootSets the theme and mode for everything inside.
ButtonThe action control. One primary per view.
IconButtonA square button holding one icon, with a required label.
IconOutline icons on a 24px grid in currentColor.
BadgeOne or two words of status, or a delta.
CardSurface, raised, hero and frame containers.
StatA number with label, unit and delta in the number face.
BarsA compact bar chart with one highlighted bar.
LineChartA line or area chart for a series over time.
SparklineA word-sized trend line beside a number.
DonutA ring for one share of a whole.
ListGroupGrouped rows on a raised panel.
TableData tables with quiet headers and tabular numbers.
TextFieldA labelled input with icon, hint and error.
SwitchAn on/off setting that applies immediately.
CheckboxA choice confirmed later, or a checklist item.
SegmentedControlTwo to four views of the same content.
TabBarBottom navigation for mobile apps.
AvatarA person's photo or initials.
ProgressA labelled linear progress bar.
ToastA short confirmation or error after an action.