WAPER / UI

Radius

Corner radii from small controls to large panels; larger surfaces use larger corners.

Preview

Light

rounded-2xs · …Inline code, key caps

rounded-xs · …Menu items, square icon buttons, tooltips, @ chips

rounded-sm · …Settings nav, selects, inputs, member rows, code blocks

rounded-toast · …Toasts

rounded-md · …Rail rows, pinned cells, search results, notices

rounded-lg · …Menus, @ menu, hover cards

rounded-panel · …Dialogs, settings, settings group cards, ⌘K, table cards

rounded-xl · …App cards, card rows

rounded-bubble · …Bubbles, multi-line composer

rounded-composer · …Single-line composer

rounded-2xl · …Card messages, phone bottom drawer

rounded-full · 9999pxButtons, pills, avatars, switches

radius-3xl (28) and radius-4xl (32) are for the landing page only.

Dark