Notion UI components examples

Notion

A bento grid layout showcasing community statistics, features, and testimonials. It includes a header with a call to action, a row of illustrated avatars, KPI tiles for community metrics, feature cards highlighting support and languages, a large image carousel showing a…

• Bento box

Notion

A bento grid layout showcasing different use cases and templates. It features a large featured card on the left with a preview image and smaller cards on the right for various templates like Product roadmap, OKRs, Meeting notes, etc. Each card includes an icon, title, and a…

• Bento box

Notion

A bento grid layout showcasing product features with illustrations, headings, descriptions, and mock UI screenshots.

• Bento box

Notion

A horizontal progress bar showing 50% completion with a numeric label.

• Progress indicator

Notion

A simple progress bar showing 0% completion with a numeric label alongside a light gray track.

• Progress indicator

Notion

A filter bar with an open dropdown menu for adding a new filter rule. The menu includes a search input and a list of filterable properties.

• Sorting & filtering

Notion

A horizontal row of filter dropdowns and an add filter button.

• Sorting & filtering

Notion

A group card with a join button

• Card

Notion

A loading state indicating the progress of an export, featuring a circular spinner and text confirming the number of pages exported and an upcoming email notification.

• Skeleton

Notion

A dropdown menu displaying options for text color and background color, organized into sections with a 'Last Used' shortcut at the top.

• Color picker

Notion

A message input field with a user mention and action icons.

• Textarea

Notion

A floating formatting toolbar positioned above selected text in a document editor. The 'Turn into' dropdown menu is open, displaying a list of block types like Text, Heading, List, and Code.

• Toolbox