DevRev UI components examples

DevRev

A bento-style feature grid showcasing product capabilities with UI mockups, titles, and descriptions.

• Bento box

DevRev

A dark-themed feature grid showcasing AI capabilities for customer support. It includes a title section and a 2x2 grid of cards, each illustrating a specific AI feature with a title, description, and a mock UI snippet.

• Bento box

DevRev

A feature section displaying product capabilities using a bento grid layout. It includes an eyebrow, a main headline, and three distinct feature cards. Each card contains a title, a brief description, and a stylized UI mockup illustrating the feature.

• Bento box

DevRev

A color picker popover displaying a grid of preset color swatches and an input field for a custom hex code.

• Color picker

DevRev

A drag-and-drop file upload area with an icon, primary action text, and secondary helper text.

• File upload input

DevRev

A read-only text field displaying a truncated string, likely a token or key, with a prominent 'Copy' button inline.

• Click to copy

DevRev

A segmented control with three options: Conversations, Users, and Tickets. Each option includes a count of 0. The 'Users' option is currently selected.

• Segmented control

DevRev

A full-width, dismissible banner providing contextual information about a specific stage or view.

• Alert

DevRev

A filter toolbar showing a dropdown menu for date selection, with a nested calendar popover open for a custom date range.

• Input date

DevRev

A pill-shaped badge displaying a status or category, featuring a colored dot indicator alongside text.

• Badge

DevRev

This is a filter bar with multiple dropdowns and a clear button.

• Sorting & filtering

DevRev

A rich text input field with formatting controls and a send button, used for drafting messages or replies.

• Rich text editor