Accordion

A vertically stacked set of interactive headings that reveal content.

Height Animation

Animate Height

A component that smoothly animates height changes for dynamic content.

1,234

Animated Number

A number display that animates when the value changes.

Section Animation

Animated Sections

Sections that animate in and out with smooth transitions.

Default
Solid

Badge

A small label component for displaying status or counts.

Button

A clickable button component with multiple variants, sizes, and shapes.

Slide 1
Slide 2

Carousel

A slideshow component for cycling through content.

Checkbox

A control that allows the user to toggle between checked and unchecked states.

Colors

OKLCH color system with Delphi brand colors and an interactive generator for creating harmonious palettes.

Command

A command palette component for searching and executing actions.

Date Picker

A calendar component for selecting dates.

Dialog

A modal dialog that interrupts the user with important content and requires action.

Dots

Animated dots indicator for loading or typing states.

Drawer

A slide-out panel that appears from the edge of the screen.

Dropdown Menu

A menu that appears on trigger, displaying a list of actions or options.

Form

Form components for handling user input with validation.

Guided Tooltip

An interactive tooltip for onboarding and feature discovery.

Hover Card

A card that appears when hovering over a trigger element.

Icon Swap

Animated icon transition component for toggling between two states.

Icons

A collection of icons used throughout the Delphi design system.

1
2

Input OTP

A one-time password input component for verification codes.

Input

A text input field for collecting user data with multiple variants, sizes, and states.

K

Keyboard Key

A component that displays keyboard shortcuts and key combinations.

Label

An accessible label component for form inputs.

Delphi

Logo

The Delphi logo and brand mark components.

Mic

A microphone indicator component for voice interactions.

1,234
5K
Expert

Mind Bubble

Displays mindscore with level-based styling, animations, and optional label.

Phone Input

A phone number input with country code selection.

Popover

A floating panel that appears on trigger for additional content.

Progress Circle

A circular progress indicator for showing completion status.

Progress

A progress bar component that shows completion status.

Radio Card

A card-style radio selection component.

Radio

A radio button group for single selection from multiple options.

Item 1
Item 2
Item 3
Item 4
Item 5

Scroll Area

A custom scrollable container with styled scrollbars.

Select

A dropdown select component for choosing from a list of options.

Left
Right

Separator

A visual divider between content sections.

Spinner

A loading spinner component for indicating progress.

Switch

A toggle switch for binary on/off states.

NameStatus
ItemActive

Table

A data table component for displaying structured information.

Tabs

A set of layered sections of content that display one panel at a time.

Talking

An animated indicator for when an AI clone is speaking.

Textarea

A multi-line text input for longer form content.

Toast

A brief notification that appears temporarily.

Toggle Group

A group of toggle buttons for selecting options.

Tooltip

A small popup that displays information on hover.

ESC
No results found