houzz-ui

Represents a user and can display a profile picture or initials. If neither are available, it will fallback to a ghost icon.

A non-interactive badge component

Banners show important information sunch as persistent condition, system status etc to users.

The Box component serves as a wrapper component for most layout needs. By default, it renders a <code>div</code> element

Buttons make common actions more obvious and help users more easily perform them. Buttons use text and sometimes icons to communicate the action that will occur when the user interacts with them.

A card

Used for selecting one or multiple items from several options.

The collapsible is a UI component for expanding or collapsing content areas within a page.

A base component useful for implementing color-coded icons representing features, documents etc.

A responsive grid layout component.

Houzz icons

A link is a navigation element most commonly used to navigate from one page to another

Different ways to indicate something is loading

An accessible dropdown menu. Used when the options are actions or navigations to other pages.

Yes, another modal

Pills are compact elements that represent an input, attribute, or action. Pills can be used to help users discover, identify, or refine content.

Thin wrapper around PopperJS library

A radio button is an element that allows a user to select a single item from a predefined list of options.

Allows users pick a value from predefined options

A building block for placeholder UI previews

Used for making selections from a range of values

A responsive flex layout component.

A badge variant representing a status.

A toggle switch represents a physical switch that allows users to turn things on or off, like a light switch. Users expect switches to see an immediate effect when they toggle it on.

Tabs are used to navigate between related views within the same context.

Text is the one of the main ways to communicate and convey ideas in product.

TextInput let users enter and edit text

Textareas allow users to input and edit a longer amount of custom text than a text field.

Toasts show up to communicate messages to users with limited information and actions.

Serves as a tool to group related button options. The toggle component adjusts how content is presented on a page. A user cannot select two buttons at once; they must select one OR the other option.

Tooltips display informative and guiding content when users hover over or focus on an element.