Toolify

Components

Get Started

Community

Support

Log In

A two-state button that can be either on or off.

Toggle

Explore our guides to get started with Toolify.

Introduction

Start building your internal tools in 5 minutes

Quick Start

Deployments

Permissions

Database Integrations

Code Generation

Base Components

A vertically stacked set of interactive headings that each reveal a section of content.

Accordion

A modal dialog that interrupts the user with important content and expects a response.

Alert Dialog

Alert

A data visualization that displays quantitative data using filled areas over time or categories.

Area Chart

Aspect Ratio

An image element with a fallback for representing the user.

Avatar

Displays a badge or a component that looks like a badge.

Badge

A graph that presents categorical data with rectangular bars proportional to the values they represent.

Bar Chart

Displays the path to the current resource using a hierarchy of links.

Breadcrumb

Displays a button or a component that looks like a button.

Button

Displays a card with header, content, and footer.

Card

An interactive component which expands/collapses a panel.

Collapsible

Autocomplete input and command palette with a list of suggestions.

Combobox

Simple helper component that when clicked, copies a string to the clipboard.

Copy Button

Table with clean APIs to display, search, sort, filter and perform actions on data

Data Table

A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.

Dialog

Displays a menu to the user — such as a set of actions or functions — triggered by a button.

Dropdown Menu

For sighted users to preview content available behind a link.

Hover Card

A type of graph that displays data as a series of points connected by straight line segments.

Line Chart

A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.

Menubar

A circular statistical graphic that is divided into slices to illustrate numerical proportion.

Pie Chart

Displays rich content in a portal, triggered by a button.

Popover

Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

Progress

Augments native scroll functionality for custom, cross-browser styling.

Scroll-area

Visually or semantically separates content.

Separator

An input where the user selects a value from within a given range.

Slider

An opinionated toast component for React.

Sonner

A set of layered sections of content—known as tab panels—that are displayed one at a time.

Tabs

A set of two-state buttons that can be toggled on or off.

Toggle Group

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.