Free Components

One action in the bottom-right corner: round with an icon, or extended with the icon and a text such as New request. Optional red badge with a count. No menu, no state. Light and dark.

A trigger with a chevron and a menu of actions under it. Rows can carry an icon; a destructive row is red under a divider. Click anywhere else to close. Light and dark.

A vertically stacked set of interactive headings that each reveal a section of content.

The plain one: title, text, a close X and one or two buttons. Dim backdrop that closes on tap, centred, never wider than the screen. The starting point for anything custom. Light and dark.

A toast notification that slides in from the bottom-right corner. Perfect for showing success messages, warnings, or other feedback to users.

A clean text input field with placeholder text and focus states. Perfect for collecting user data in forms.

The standard switch: brand color when on, grey when off, a white knob that slides. Optional label beside it. Sets a true or false variable you use anywhere. Light and dark.

The filled brand button. Three sizes, width that follows the text, an optional icon left or right. The one button every screen has. Light and dark.

A bordered button for the second action next to a primary one: Cancel, Back, Skip. Optional icon. Light and dark.

A grey track with a white segment that slides to the active tab. The everyday tab bar for a form or a record page. Fits the screen width. Light and dark.