Components

Beta

Your free, configurable component library for building web apps in Webflow.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

App Link

These navigation links are meant to be used with the App Shell component.

App Shell

The starting point for an application, including navigation and a content wrapper in the form of a dashboard.

Breakout

Panels have padding by default. The breakout component can negate this padding in various directions, allowing you to create panels with full-width tables, for example.

Button

A native button element with a variety of styling options. The most common of interface elements.

Divider

A horizontal separating line. Useful for visually delineating separate sections or portions of information.

Form

A versatile form component that can be used for CRUD operations, authentication, or in any other scenario where an API call needs to be sent along with data.

Form (Multi-Step)

A form element with more than one page, for more complex data collection.

Form Field (Input)

A field for use with the form and multi-step form components. For other types of inputs not listed here, check the other "Form Field" components.

Header

The top portion of a page, section, or panel. Use this element to denote the beginning of an element or piece of content.

Icon

A vector graphic to provide a visual representation of a piece of information, or to provide interest in an otherwise plain area.

Loader

A spinner to provide visual feedback to the user while data loads.

Modal

A panel that can be shown/hidden and overlays the screen. Other elements can be nested inside of it.

Panel

A wrapper for a section within the App Shell. Used to encapsulate a group of components like headers, forms, or tables. Use the Breakout component to eliminate the padding inside as necessary.

Table

An HTML table element for displaying lists of data. The table can be bound to a variable to automatically update.

A cell for use in the body rows of a table component. You can fill the cell with text, a link, icons, or anything else that makes sense. The cell is populated on instantiation with the corresponding action.

Table Cell (Header)

A cell for use in the header row of a table component. You can optionally include a sorting button with a key (that will be sent as a query parameter with the table's update request).