@designali

A simple header section.

A simple header section.

A simple header section.

A simple header section.

A simple header section.

A simple header section.

A split-screen hero section with branding, theme toggle, video, work, and contact cards.

A split-screen hero section with branding, theme toggle, video, work, and contact cards.

A split-screen hero section with branding, theme toggle, video, work, and contact cards.

A split-screen hero section with branding, theme toggle, video, work, and contact cards.

A split-screen hero section with branding, theme toggle, video, work, and contact cards.

A simple footer.

A simple footer.

A simple footer.

A simple footer.

A simple footer.

A simple footer.

A simple logos section.

A simple logos section.

A simple logos section.

A simple logos section.

A simple logos section.

A simple call-to-action section.

A simple feature section.

A simple pricing section.

A simple pricing section.

A simple pricing section.

A simple gallery section.

Personal FAQ accordion introducing Ali Imam, his design approach, inspirations, and ways to connect for collaborations.

Personal FAQ accordion introducing Ali Imam, his design approach, inspirations, and ways to connect for collaborations.

Personal FAQ accordion introducing Ali Imam, his design approach, inspirations, and ways to connect for collaborations.

Personal FAQ accordion introducing Ali Imam, his design approach, inspirations, and ways to connect for collaborations.

Personal FAQ accordion introducing Ali Imam, his design approach, inspirations, and ways to connect for collaborations.

Personal FAQ accordion introducing Ali Imam, his design approach, inspirations, and ways to connect for collaborations.

Alert component showcase

Alert with icon showcase

Alert with action buttons showcase

Alert variants showcase

Alert success variant showcase

Alert warning variant showcase

Alert error variant showcase

Alert dialog error variant showcase

Alert dialog error variant showcase

Aspect ratio default 16:9 showcase

Aspect ratio square 1:1 showcase

Aspect ratio portrait 9:16 showcase

Aspect ratio RTL translation showcase

Basic avatar showcase

Avatar with status badge showcase

Avatar with badge icon showcase

Avatar group stack showcase

Avatar group with numerical count showcase

Avatar group with icon count showcase

Avatar different sizes showcase

Avatar dropdown menu trigger showcase

Badge variants showcase

Badge with icons showcase

Badge with spinner showcase

Badge rendered as link showcase

Badge custom color variants showcase

Basic breadcrumb showcase

Breadcrumb with custom separators showcase

Breadcrumb with dropdown menu showcase

Breadcrumb with collapsed ellipsis showcase

Breadcrumb with custom link components showcase

Button sizes and icon-only variants

Button with leading and trailing icons

Rounded full button variant

Button with loading spinner state

Button group with dropdown actions

Button rendered using buttonVariants helper

Button custom variant showcase

Button custom variant showcase

Simple popover single date picker with button trigger.

Dual-month range picker inside a card container.

Date range picker with quick preset options.

Calendar with month and year dropdown navigation.

Multiple individual dates selection mode.

Calendar with disabled dates, weekends, and bounds.

Calendar with custom modifier classes and availability indicators.

Calendar picker integrated with a time slot selector.

Compact workspace management card with checklist and action buttons.

Login form card with custom spacing toggle control.

Terms of service card with edge-to-edge scrollable content area.

Featured event card with full-width image header and overlay badge.

Standard authentication login form card with social login button.

Basic horizontal carousel with previous and next controls.

Responsive multi-item carousel with custom basis sizes.

Carousel with explicit negative item spacing and padding options.

Vertical orientation carousel with fixed height container.

Carousel with API event listener for current slide and total count indicator.

Autoplay carousel plugin with hover pause and resume controls.

Simple single checkbox with an aligned label field.

Checkbox with supporting helper text description block.

Disabled state checkbox wrapped in a field group with data attributes.

Multiple stacked options using FieldSet and FieldLegend layout components.

Interactive data table rows with batch and row-level selection checkboxes.

Comprehensive checkbox demo displaying basic, descriptive, disabled, and wrapped variants.

Basic order status details toggle with header and content trigger.

Expandable product details section inside a card container.

Settings card with collapsible field controls and expand/collapse trigger.

Recursive file tree explorer with nested collapsible folders.

Basic single selection combobox with framework list.

Multi-select combobox with interactive tag chips.

Combobox input featuring a clear selection action button.

Grouped timezone options with visual separators between sections.

Custom rich item layout displaying country code and continent metadata.

Combobox displaying aria-invalid validation error state.

Comprehensive combobox demo showcasing form integration and variations.

Default context menu with submenus, checkboxes, and radio items.

Default context menu with submenus, checkboxes, and radio items.

Default context menu with submenus, checkboxes, and radio items.

Default context menu with submenus, checkboxes, and radio items.

Context menu with keyboard shortcut indicators.

Context menu items with Lucide icons and destructive actions.

Standard modal dialog with form fields and submit action.

Dialog configured without a default top-right close button.

Dialog with a scrollable content body and sticky footer action controls.

Drawer with radio group selection for interactive options.

Drawer featuring a visible top/side swipe indicator handle.

Non-modal drawer configuration with rightward swipe direction.

Complex dropdown menu with submenus, shortcuts, groups, and separator items.

Dropdown menu featuring item keyboard shortcuts and labels.

Dropdown menu with interactive toggleable checkbox items.

Standard hover card displaying preview information on hover trigger.

Hover card with custom delay configurations and rich avatar content.

Input example

Input example

Input example

Standard 6-digit OTP input field with default value.

6-digit OTP input with separators dividing field groups.

4-digit numeric OTP input restricted with digit-only regex pattern validation.

Desktop application top navigation bar with nested submenus, shortcuts, and selections.

Menubar featuring single-select radio button groups for active user and theme selections.

Full-featured navigation menu with rich dropdown layouts, component grids, and icons.

A complete checkout form demonstrating nested field groups, fieldsets, field legends, and layout grids.

An account credentials fieldset featuring username and password inputs with field descriptions.

A feedback form field configuration utilizing a textarea control with descriptive field text.

Standard pagination bar with previous, next, page numbers, and ellipsis indicator.

Compact pagination layout featuring rows-per-page selector paired with icon-only previous and next controls.

Simple, minimal pagination listing numbered page links without previous or next buttons.

Standard popover with dimension controls and field inputs.

Popover content alignment variants illustrating start, center, and end placements.

Popover containing a structured form with headers, descriptions, and horizontal field inputs.

Standard animated progress bar component demonstrating a dynamic loading state.

Progress component featuring built-in label and numerical percentage indicators.

Controlled progress indicator paired with an interactive slider control.

Standard radio button group with text labels.

Radio group integrated with field components for layout and detailed descriptions.

Radio group styled as interactive choice cards with title and description fields.

Nested horizontal and vertical resizable panel groups with visible drag handles.

Vertical resizable panel layout configured for header and content areas.

Horizontal resizable panel layout with a drag handle icon for sidebar and main content.

Vertical scroll area component displaying a long list with subtle dividers.

Horizontal scroll area featuring image thumbnails and an explicit scroll bar orientation.

Basic select dropdown component with grouped items and a clear placeholder state.

Interactive select component with a toggle switch to dynamically adjust trigger alignment.

Select dropdown featuring grouped categories separated by visual dividers.

Horizontal separator component dividing text content and headers.

Vertical separator component used as a divider between inline navigation links.

Multiple horizontal separators dividing items in a key-value list layout.

Slide-over sheet component with header, form fields, and footer actions.

Sheet component featuring custom side placements and interaction options.

Basic skeleton loading state for an avatar and multi-line text block.

Skeleton loader structured inside a card container with header and video placeholder.

Complex skeleton placeholder layout for a data table or feed item.

Basic single-thumb range slider component.

Controlled dual-thumb range slider with label and dynamic value output.

Slider component configured with custom step intervals and tick indicators.

Vertical slider variant with boundary limits and disabled state showcase.

Loading spinner integrated within an item component to indicate an active processing state.

Standalone spinner indicator with varying size and color utility configurations.

Basic toggle switch component paired with an inline text label.

Grouped layout containing switches alongside titles and descriptions.

Standard data table display with caption, styled header, row items, and total calculation footer.

Interactive data table with per-row dropdown action menus.

Standard tabs layout with card components inside tab content panels.

Tabs navigation rendered with an active underline indicator variant.

Standard multi-line text input field component.

Textarea input integrated within a field wrapper with label and helper description.

Actionable toast notification triggered via button interaction.

Variant toast notifications displaying default, success, info, warning, and error states.

Small outline toggle button featuring an icon and text label.

Group of outline toggle buttons for text formatting controls.

Multiple-selection outline toggle group for text formatting icon controls.

Outline toggle group for filter selection with a default active state.

Standard tooltip triggered by hovering over an outline button.

Tooltips demonstrated across all directional sides (left, top, bottom, right).

component showing a simple dot pattern.

component showing a simple dot pattern.

component showing a simple dot pattern.

component showing a simple dot pattern.

component showing a simple dot pattern.

Basic gauge demo

Gauge with custom value text

Gauge size variations

Gauge thickness variations

Gauge gap variations

Gauge segment variations

Gauge angle variations

Gauge radius customization

Gauge loading and complete states

Gauge with custom min and max ranges

Gauge with label

Gauge with custom center content

Biomarker gauge components

Multiple gauges displayed together

Combined gauge composition demo

component showing a simple bento.

component showing a simple bento.

component showing a simple bento.

component showing a simple bento.

component showing a simple bento.

component showing a simple grid pattern.

component showing a simple grid pattern.

component showing a simple grid pattern.

component showing a simple grid pattern.

component showing a simple grid pattern.

component showing a simple typewriter.

component showing a simple typewriter.

component showing a simple typewriter.

component showing a simple typewriter.

component showing a simple typewriter.