Harvest UI components examples

Harvest

An inline informational alert box with a blue background, an exclamation icon, and a message containing a text link.

• Alert

Harvest

A horizontal row of circular color swatches used to select a color scheme. The currently selected color is indicated by a white dot in the center of the swatch.

• Color picker

Harvest

A data table displaying uninvoiced hours and expenses grouped by client and project. It includes columns for total hours, uninvoiced hours, uninvoiced expenses, and uninvoiced amount, with action buttons to generate invoices for specific clients.

• Table

Harvest

A horizontal row of text tabs with an underline indicator for the active state.

• Tabs

Harvest

A form section allowing users to select a time and specific days of the week for receiving reminders. It features a dropdown for time selection and a toggle group of buttons for each day of the week.

• Datepicker

Harvest

A vertical navigation menu for a settings page. The active item is highlighted with a light orange background and a thick orange left border.

• Vertical navigation

Harvest

A standard file upload input field with a label and helper text.

• File upload input

Harvest

A form field for assigning roles, displaying a selected role as a tag with a remove icon. Includes a label and helper text.

• Input tag

Harvest

A progress bar showing total hours worked against capacity, with a breakdown of billable and non-billable hours.

• Charts

Harvest

A stacked horizontal bar chart showing a breakdown of projects with a legend below.

• Charts

Harvest

A form section for selecting user permissions. It features a radio group with three main roles: Member, Manager, and Administrator. The Manager option includes a nested list of disabled checkboxes for further configuration.

• Checkbox & radio

Harvest

A horizontal row displaying a user's initials avatar, full name, and a role badge.

• Avatar