WorkOs UI components examples

WorkOs

A bento grid layout highlighting key features of a Single Sign-On product. It includes a prominent headline, a primary call-to-action button, and a grid of cards detailing specific capabilities like SAML support and identity provider integrations.

• Bento box

WorkOs

An error message modal

• Message

WorkOs

A pill-shaped badge indicating an 'Enabled' status.

• Badge

WorkOs

A full-width warning alert banner containing a single line of text instructing the user to add the ACS URL to complete the connection.

• Message

WorkOs

A pill-shaped badge indicating an 'Inactive' status, featuring yellow text on a dark olive background.

• Badge

WorkOs

A dark-themed vertical sidebar navigation menu. It features an environment selector dropdown at the top, followed by a list of navigation links with icons. The 'Organizations' link is currently active.

• Vertical navigation

WorkOs

A breadcrumb trail showing the hierarchical path to the current page, with clickable links for parent levels and plain text for the current level.

• Breadcrumb

WorkOs

A 6-digit one-time passcode (OTP) input field with instructional text above and below, and a submit arrow button.

• Input code

WorkOs

A list of product benefits with a headline and checkmark icons.

• Benefit List

WorkOs

A frequently asked questions section featuring a list of collapsible questions and a final card prompting users to schedule a call if they have more questions.

• FAQ

WorkOs

A card component displaying a feature category with a toggle switch and a list of included features.

• Toggle/Switch

WorkOs

A horizontal slider control used to select a numeric value, featuring a label, an info icon, and a track with tick marks and numeric labels at intervals.

• Slider