---
name: "@designali"
slug: "designali"
description: "Where thoughtful design meets production-ready code. I design and build digital experiences that look great, feel intuitive, and work beautifully."
category: "Animated components"
tags: ["animation", "blocks", "buttons", "cards", "forms", "icons", "marketing", "media", "navigation", "overlays", "pro-available", "text-effects"]
framework: "react"
license: null
author: null
website: "https://designali.com"
github: null
registry: "https://designali.com/r/registry.json"
pro: true
pro_url: "https://designali.com/pricing"
github_stars: null
component_count: 244
generated_at: "2026-09-21T01:50:16.753Z"
---

# @designali

Where thoughtful design meets production-ready code. I design and build digital experiences that look great, feel intuitive, and work beautifully.

## Links

- Website: https://designali.com
- Registry JSON: https://designali.com/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/designali
- This file: https://sh4dcn.vercel.app/md/designali.md
- Pro / pricing: https://designali.com/pricing

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://designali.com/r/registry.json
pnpm dlx shadcn@latest add https://designali.com/r/registry.json
bunx shadcn@latest add https://designali.com/r/registry.json
# fetch the raw registry index
curl -s https://designali.com/r/registry.json
```

## Components (244)

| name | type | description | install |
| --- | --- | --- | --- |
| gauge | registry:ui | — | `npx shadcn@latest add https://designali.com/r/gauge.json` |
| bento | registry:ui | — | `npx shadcn@latest add https://designali.com/r/bento.json` |
| counter-number | registry:ui | — | `npx shadcn@latest add https://designali.com/r/counter-number.json` |
| dot-pattern | registry:ui | — | `npx shadcn@latest add https://designali.com/r/dot-pattern.json` |
| grid-pattern | registry:ui | — | `npx shadcn@latest add https://designali.com/r/grid-pattern.json` |
| marquee | registry:ui | — | `npx shadcn@latest add https://designali.com/r/marquee.json` |
| typewriter | registry:ui | — | `npx shadcn@latest add https://designali.com/r/typewriter.json` |
| header-01 | registry:block | A simple header section. | `npx shadcn@latest add https://designali.com/r/header-01.json` |
| header-02 | registry:block | A simple header section. | `npx shadcn@latest add https://designali.com/r/header-02.json` |
| header-03 | registry:block | A simple header section. | `npx shadcn@latest add https://designali.com/r/header-03.json` |
| header-04 | registry:block | A simple header section. | `npx shadcn@latest add https://designali.com/r/header-04.json` |
| header-05 | registry:block | A simple header section. | `npx shadcn@latest add https://designali.com/r/header-05.json` |
| header-06 | registry:block | A simple header section. | `npx shadcn@latest add https://designali.com/r/header-06.json` |
| hero-1 | registry:block | A split-screen hero section with branding, theme toggle, video, work, and contact cards. | `npx shadcn@latest add https://designali.com/r/hero-1.json` |
| hero-2 | registry:block | A split-screen hero section with branding, theme toggle, video, work, and contact cards. | `npx shadcn@latest add https://designali.com/r/hero-2.json` |
| hero-3 | registry:block | A split-screen hero section with branding, theme toggle, video, work, and contact cards. | `npx shadcn@latest add https://designali.com/r/hero-3.json` |
| hero-4 | registry:block | A split-screen hero section with branding, theme toggle, video, work, and contact cards. | `npx shadcn@latest add https://designali.com/r/hero-4.json` |
| hero-5 | registry:block | A split-screen hero section with branding, theme toggle, video, work, and contact cards. | `npx shadcn@latest add https://designali.com/r/hero-5.json` |
| footer-01 | registry:block | A simple footer. | `npx shadcn@latest add https://designali.com/r/footer-01.json` |
| footer-02 | registry:block | A simple footer. | `npx shadcn@latest add https://designali.com/r/footer-02.json` |
| footer-03 | registry:block | A simple footer. | `npx shadcn@latest add https://designali.com/r/footer-03.json` |
| footer-04 | registry:block | A simple footer. | `npx shadcn@latest add https://designali.com/r/footer-04.json` |
| footer-05 | registry:block | A simple footer. | `npx shadcn@latest add https://designali.com/r/footer-05.json` |
| footer-06 | registry:block | A simple footer. | `npx shadcn@latest add https://designali.com/r/footer-06.json` |
| logos-01 | registry:block | A simple logos section. | `npx shadcn@latest add https://designali.com/r/logos-01.json` |
| logos-02 | registry:block | A simple logos section. | `npx shadcn@latest add https://designali.com/r/logos-02.json` |
| logos-03 | registry:block | A simple logos section. | `npx shadcn@latest add https://designali.com/r/logos-03.json` |
| logos-04 | registry:block | A simple logos section. | `npx shadcn@latest add https://designali.com/r/logos-04.json` |
| logos-05 | registry:block | A simple logos section. | `npx shadcn@latest add https://designali.com/r/logos-05.json` |
| call-to-action-01 | registry:block | A simple call-to-action section. | `npx shadcn@latest add https://designali.com/r/call-to-action-01.json` |
| feature-01 | registry:block | A simple feature section. | `npx shadcn@latest add https://designali.com/r/feature-01.json` |
| faqs-01 | registry:block | A simple pricing section. | `npx shadcn@latest add https://designali.com/r/faqs-01.json` |
| pricing-01 | registry:block | A simple pricing section. | `npx shadcn@latest add https://designali.com/r/pricing-01.json` |
| testimonial-01 | registry:block | A simple pricing section. | `npx shadcn@latest add https://designali.com/r/testimonial-01.json` |
| gallery-01 | registry:block | A simple gallery section. | `npx shadcn@latest add https://designali.com/r/gallery-01.json` |
| accordion-01 | registry:example | Personal FAQ accordion introducing Ali Imam, his design approach, inspirations, and ways to connect for collaborations. | `npx shadcn@latest add https://designali.com/r/accordion-01.json` |
| accordion-02 | registry:example | Personal FAQ accordion introducing Ali Imam, his design approach, inspirations, and ways to connect for collaborations. | `npx shadcn@latest add https://designali.com/r/accordion-02.json` |
| accordion-03 | registry:example | Personal FAQ accordion introducing Ali Imam, his design approach, inspirations, and ways to connect for collaborations. | `npx shadcn@latest add https://designali.com/r/accordion-03.json` |
| accordion-04 | registry:example | Personal FAQ accordion introducing Ali Imam, his design approach, inspirations, and ways to connect for collaborations. | `npx shadcn@latest add https://designali.com/r/accordion-04.json` |
| accordion-05 | registry:example | Personal FAQ accordion introducing Ali Imam, his design approach, inspirations, and ways to connect for collaborations. | `npx shadcn@latest add https://designali.com/r/accordion-05.json` |
| accordion-06 | registry:example | Personal FAQ accordion introducing Ali Imam, his design approach, inspirations, and ways to connect for collaborations. | `npx shadcn@latest add https://designali.com/r/accordion-06.json` |
| alert-01 | registry:example | Alert component showcase | `npx shadcn@latest add https://designali.com/r/alert-01.json` |
| alert-02 | registry:example | Alert with icon showcase | `npx shadcn@latest add https://designali.com/r/alert-02.json` |
| alert-03 | registry:example | Alert with action buttons showcase | `npx shadcn@latest add https://designali.com/r/alert-03.json` |
| alert-04 | registry:example | Alert variants showcase | `npx shadcn@latest add https://designali.com/r/alert-04.json` |
| alert-05 | registry:example | Alert success variant showcase | `npx shadcn@latest add https://designali.com/r/alert-05.json` |
| alert-06 | registry:example | Alert warning variant showcase | `npx shadcn@latest add https://designali.com/r/alert-06.json` |
| alert-07 | registry:example | Alert error variant showcase | `npx shadcn@latest add https://designali.com/r/alert-07.json` |
| alert-dialog-01 | registry:example | Alert dialog error variant showcase | `npx shadcn@latest add https://designali.com/r/alert-dialog-01.json` |
| alert-dialog-02 | registry:example | Alert dialog error variant showcase | `npx shadcn@latest add https://designali.com/r/alert-dialog-02.json` |
| aspect-ratio-01 | registry:example | Aspect ratio default 16:9 showcase | `npx shadcn@latest add https://designali.com/r/aspect-ratio-01.json` |
| aspect-ratio-02 | registry:example | Aspect ratio square 1:1 showcase | `npx shadcn@latest add https://designali.com/r/aspect-ratio-02.json` |
| aspect-ratio-03 | registry:example | Aspect ratio portrait 9:16 showcase | `npx shadcn@latest add https://designali.com/r/aspect-ratio-03.json` |
| aspect-ratio-04 | registry:example | Aspect ratio RTL translation showcase | `npx shadcn@latest add https://designali.com/r/aspect-ratio-04.json` |
| avatar-01 | registry:example | Basic avatar showcase | `npx shadcn@latest add https://designali.com/r/avatar-01.json` |
| avatar-02 | registry:example | Avatar with status badge showcase | `npx shadcn@latest add https://designali.com/r/avatar-02.json` |
| avatar-03 | registry:example | Avatar with badge icon showcase | `npx shadcn@latest add https://designali.com/r/avatar-03.json` |
| avatar-04 | registry:example | Avatar group stack showcase | `npx shadcn@latest add https://designali.com/r/avatar-04.json` |
| avatar-05 | registry:example | Avatar group with numerical count showcase | `npx shadcn@latest add https://designali.com/r/avatar-05.json` |
| avatar-06 | registry:example | Avatar group with icon count showcase | `npx shadcn@latest add https://designali.com/r/avatar-06.json` |
| avatar-07 | registry:example | Avatar different sizes showcase | `npx shadcn@latest add https://designali.com/r/avatar-07.json` |
| avatar-08 | registry:example | Avatar dropdown menu trigger showcase | `npx shadcn@latest add https://designali.com/r/avatar-08.json` |
| badge-01 | registry:example | Badge variants showcase | `npx shadcn@latest add https://designali.com/r/badge-01.json` |
| badge-02 | registry:example | Badge with icons showcase | `npx shadcn@latest add https://designali.com/r/badge-02.json` |
| badge-03 | registry:example | Badge with spinner showcase | `npx shadcn@latest add https://designali.com/r/badge-03.json` |
| badge-04 | registry:example | Badge rendered as link showcase | `npx shadcn@latest add https://designali.com/r/badge-04.json` |
| badge-05 | registry:example | Badge custom color variants showcase | `npx shadcn@latest add https://designali.com/r/badge-05.json` |
| breadcrumb-01 | registry:example | Basic breadcrumb showcase | `npx shadcn@latest add https://designali.com/r/breadcrumb-01.json` |
| breadcrumb-02 | registry:example | Breadcrumb with custom separators showcase | `npx shadcn@latest add https://designali.com/r/breadcrumb-02.json` |
| breadcrumb-03 | registry:example | Breadcrumb with dropdown menu showcase | `npx shadcn@latest add https://designali.com/r/breadcrumb-03.json` |
| breadcrumb-04 | registry:example | Breadcrumb with collapsed ellipsis showcase | `npx shadcn@latest add https://designali.com/r/breadcrumb-04.json` |
| breadcrumb-05 | registry:example | Breadcrumb with custom link components showcase | `npx shadcn@latest add https://designali.com/r/breadcrumb-05.json` |
| button-01 | registry:example | Button sizes and icon-only variants | `npx shadcn@latest add https://designali.com/r/button-01.json` |
| button-02 | registry:example | Button with leading and trailing icons | `npx shadcn@latest add https://designali.com/r/button-02.json` |
| button-03 | registry:example | Rounded full button variant | `npx shadcn@latest add https://designali.com/r/button-03.json` |
| button-04 | registry:example | Button with loading spinner state | `npx shadcn@latest add https://designali.com/r/button-04.json` |
| button-05 | registry:example | Button group with dropdown actions | `npx shadcn@latest add https://designali.com/r/button-05.json` |
| button-06 | registry:example | Button rendered using buttonVariants helper | `npx shadcn@latest add https://designali.com/r/button-06.json` |
| button-07 | registry:example | Button custom variant showcase | `npx shadcn@latest add https://designali.com/r/button-07.json` |
| button-07 | registry:example | Button custom variant showcase | `npx shadcn@latest add https://designali.com/r/button-07.json` |
| calendar-01 | registry:example | Simple popover single date picker with button trigger. | `npx shadcn@latest add https://designali.com/r/calendar-01.json` |
| calendar-02 | registry:example | Dual-month range picker inside a card container. | `npx shadcn@latest add https://designali.com/r/calendar-02.json` |
| calendar-03 | registry:example | Date range picker with quick preset options. | `npx shadcn@latest add https://designali.com/r/calendar-03.json` |
| calendar-04 | registry:example | Calendar with month and year dropdown navigation. | `npx shadcn@latest add https://designali.com/r/calendar-04.json` |
| calendar-05 | registry:example | Multiple individual dates selection mode. | `npx shadcn@latest add https://designali.com/r/calendar-05.json` |
| calendar-06 | registry:example | Calendar with disabled dates, weekends, and bounds. | `npx shadcn@latest add https://designali.com/r/calendar-06.json` |
| calendar-07 | registry:example | Calendar with custom modifier classes and availability indicators. | `npx shadcn@latest add https://designali.com/r/calendar-07.json` |
| calendar-08 | registry:example | Calendar picker integrated with a time slot selector. | `npx shadcn@latest add https://designali.com/r/calendar-08.json` |
| card-01 | registry:example | Compact workspace management card with checklist and action buttons. | `npx shadcn@latest add https://designali.com/r/card-01.json` |
| card-02 | registry:example | Login form card with custom spacing toggle control. | `npx shadcn@latest add https://designali.com/r/card-02.json` |
| card-03 | registry:example | Terms of service card with edge-to-edge scrollable content area. | `npx shadcn@latest add https://designali.com/r/card-03.json` |
| card-04 | registry:example | Featured event card with full-width image header and overlay badge. | `npx shadcn@latest add https://designali.com/r/card-04.json` |
| card-05 | registry:example | Standard authentication login form card with social login button. | `npx shadcn@latest add https://designali.com/r/card-05.json` |
| carousel-01 | registry:example | Basic horizontal carousel with previous and next controls. | `npx shadcn@latest add https://designali.com/r/carousel-01.json` |
| carousel-02 | registry:example | Responsive multi-item carousel with custom basis sizes. | `npx shadcn@latest add https://designali.com/r/carousel-02.json` |
| carousel-03 | registry:example | Carousel with explicit negative item spacing and padding options. | `npx shadcn@latest add https://designali.com/r/carousel-03.json` |
| carousel-04 | registry:example | Vertical orientation carousel with fixed height container. | `npx shadcn@latest add https://designali.com/r/carousel-04.json` |
| carousel-05 | registry:example | Carousel with API event listener for current slide and total count indicator. | `npx shadcn@latest add https://designali.com/r/carousel-05.json` |
| carousel-06 | registry:example | Autoplay carousel plugin with hover pause and resume controls. | `npx shadcn@latest add https://designali.com/r/carousel-06.json` |
| checkbox-01 | registry:example | Simple single checkbox with an aligned label field. | `npx shadcn@latest add https://designali.com/r/checkbox-01.json` |
| checkbox-02 | registry:example | Checkbox with supporting helper text description block. | `npx shadcn@latest add https://designali.com/r/checkbox-02.json` |
| checkbox-03 | registry:example | Disabled state checkbox wrapped in a field group with data attributes. | `npx shadcn@latest add https://designali.com/r/checkbox-03.json` |
| checkbox-04 | registry:example | Multiple stacked options using FieldSet and FieldLegend layout components. | `npx shadcn@latest add https://designali.com/r/checkbox-04.json` |
| checkbox-05 | registry:example | Interactive data table rows with batch and row-level selection checkboxes. | `npx shadcn@latest add https://designali.com/r/checkbox-05.json` |
| checkbox-06 | registry:example | Comprehensive checkbox demo displaying basic, descriptive, disabled, and wrapped variants. | `npx shadcn@latest add https://designali.com/r/checkbox-06.json` |
| collapsible-01 | registry:example | Basic order status details toggle with header and content trigger. | `npx shadcn@latest add https://designali.com/r/collapsible-01.json` |
| collapsible-02 | registry:example | Expandable product details section inside a card container. | `npx shadcn@latest add https://designali.com/r/collapsible-02.json` |
| collapsible-03 | registry:example | Settings card with collapsible field controls and expand/collapse trigger. | `npx shadcn@latest add https://designali.com/r/collapsible-03.json` |
| collapsible-04 | registry:example | Recursive file tree explorer with nested collapsible folders. | `npx shadcn@latest add https://designali.com/r/collapsible-04.json` |
| combobox-01 | registry:example | Basic single selection combobox with framework list. | `npx shadcn@latest add https://designali.com/r/combobox-01.json` |
| combobox-02 | registry:example | Multi-select combobox with interactive tag chips. | `npx shadcn@latest add https://designali.com/r/combobox-02.json` |
| combobox-03 | registry:example | Combobox input featuring a clear selection action button. | `npx shadcn@latest add https://designali.com/r/combobox-03.json` |
| combobox-04 | registry:example | Grouped timezone options with visual separators between sections. | `npx shadcn@latest add https://designali.com/r/combobox-04.json` |
| combobox-05 | registry:example | Custom rich item layout displaying country code and continent metadata. | `npx shadcn@latest add https://designali.com/r/combobox-05.json` |
| combobox-06 | registry:example | Combobox displaying aria-invalid validation error state. | `npx shadcn@latest add https://designali.com/r/combobox-06.json` |
| combobox-07 | registry:example | Comprehensive combobox demo showcasing form integration and variations. | `npx shadcn@latest add https://designali.com/r/combobox-07.json` |
| command-01 | registry:example | Default context menu with submenus, checkboxes, and radio items. | `npx shadcn@latest add https://designali.com/r/command-01.json` |
| command-02 | registry:example | Default context menu with submenus, checkboxes, and radio items. | `npx shadcn@latest add https://designali.com/r/command-02.json` |
| command-03 | registry:example | Default context menu with submenus, checkboxes, and radio items. | `npx shadcn@latest add https://designali.com/r/command-03.json` |
| context-menu-01 | registry:example | Default context menu with submenus, checkboxes, and radio items. | `npx shadcn@latest add https://designali.com/r/context-menu-01.json` |
| context-menu-02 | registry:example | Context menu with keyboard shortcut indicators. | `npx shadcn@latest add https://designali.com/r/context-menu-02.json` |
| context-menu-03 | registry:example | Context menu items with Lucide icons and destructive actions. | `npx shadcn@latest add https://designali.com/r/context-menu-03.json` |
| dialog-01 | registry:example | Standard modal dialog with form fields and submit action. | `npx shadcn@latest add https://designali.com/r/dialog-01.json` |
| dialog-02 | registry:example | Dialog configured without a default top-right close button. | `npx shadcn@latest add https://designali.com/r/dialog-02.json` |
| dialog-03 | registry:example | Dialog with a scrollable content body and sticky footer action controls. | `npx shadcn@latest add https://designali.com/r/dialog-03.json` |
| drawer-01 | registry:example | Drawer with radio group selection for interactive options. | `npx shadcn@latest add https://designali.com/r/drawer-01.json` |
| drawer-02 | registry:example | Drawer featuring a visible top/side swipe indicator handle. | `npx shadcn@latest add https://designali.com/r/drawer-02.json` |
| drawer-03 | registry:example | Non-modal drawer configuration with rightward swipe direction. | `npx shadcn@latest add https://designali.com/r/drawer-03.json` |
| dropdown-menu-01 | registry:example | Complex dropdown menu with submenus, shortcuts, groups, and separator items. | `npx shadcn@latest add https://designali.com/r/dropdown-menu-01.json` |
| dropdown-menu-02 | registry:example | Dropdown menu featuring item keyboard shortcuts and labels. | `npx shadcn@latest add https://designali.com/r/dropdown-menu-02.json` |
| dropdown-menu-03 | registry:example | Dropdown menu with interactive toggleable checkbox items. | `npx shadcn@latest add https://designali.com/r/dropdown-menu-03.json` |
| hover-card-01 | registry:example | Standard hover card displaying preview information on hover trigger. | `npx shadcn@latest add https://designali.com/r/hover-card-01.json` |
| hover-card-02 | registry:example | Hover card with custom delay configurations and rich avatar content. | `npx shadcn@latest add https://designali.com/r/hover-card-02.json` |
| input-01 | registry:example | Input example | `npx shadcn@latest add https://designali.com/r/input-01.json` |
| input-02 | registry:example | Input example | `npx shadcn@latest add https://designali.com/r/input-02.json` |
| input-03 | registry:example | Input example | `npx shadcn@latest add https://designali.com/r/input-03.json` |
| input-otp-01 | registry:example | Standard 6-digit OTP input field with default value. | `npx shadcn@latest add https://designali.com/r/input-otp-01.json` |
| input-otp-02 | registry:example | 6-digit OTP input with separators dividing field groups. | `npx shadcn@latest add https://designali.com/r/input-otp-02.json` |
| input-otp-03 | registry:example | 4-digit numeric OTP input restricted with digit-only regex pattern validation. | `npx shadcn@latest add https://designali.com/r/input-otp-03.json` |
| label-01 | registry:example | — | `npx shadcn@latest add https://designali.com/r/label-01.json` |
| label-02 | registry:example | — | `npx shadcn@latest add https://designali.com/r/label-02.json` |
| menubar-01 | registry:example | Desktop application top navigation bar with nested submenus, shortcuts, and selections. | `npx shadcn@latest add https://designali.com/r/menubar-01.json` |
| menubar-02 | registry:example | Menubar featuring single-select radio button groups for active user and theme selections. | `npx shadcn@latest add https://designali.com/r/menubar-02.json` |
| navigation-menu-01 | registry:example | Full-featured navigation menu with rich dropdown layouts, component grids, and icons. | `npx shadcn@latest add https://designali.com/r/navigation-menu-01.json` |
| field-01 | registry:example | A complete checkout form demonstrating nested field groups, fieldsets, field legends, and layout grids. | `npx shadcn@latest add https://designali.com/r/field-01.json` |
| field-02 | registry:example | An account credentials fieldset featuring username and password inputs with field descriptions. | `npx shadcn@latest add https://designali.com/r/field-02.json` |
| field-03 | registry:example | A feedback form field configuration utilizing a textarea control with descriptive field text. | `npx shadcn@latest add https://designali.com/r/field-03.json` |
| pagination-01 | registry:example | Standard pagination bar with previous, next, page numbers, and ellipsis indicator. | `npx shadcn@latest add https://designali.com/r/pagination-01.json` |
| pagination-02 | registry:example | Compact pagination layout featuring rows-per-page selector paired with icon-only previous and next controls. | `npx shadcn@latest add https://designali.com/r/pagination-02.json` |
| pagination-03 | registry:example | Simple, minimal pagination listing numbered page links without previous or next buttons. | `npx shadcn@latest add https://designali.com/r/pagination-03.json` |
| popover-01 | registry:example | Standard popover with dimension controls and field inputs. | `npx shadcn@latest add https://designali.com/r/popover-01.json` |
| popover-02 | registry:example | Popover content alignment variants illustrating start, center, and end placements. | `npx shadcn@latest add https://designali.com/r/popover-02.json` |
| popover-03 | registry:example | Popover containing a structured form with headers, descriptions, and horizontal field inputs. | `npx shadcn@latest add https://designali.com/r/popover-03.json` |
| progress-01 | registry:example | Standard animated progress bar component demonstrating a dynamic loading state. | `npx shadcn@latest add https://designali.com/r/progress-01.json` |
| progress-02 | registry:example | Progress component featuring built-in label and numerical percentage indicators. | `npx shadcn@latest add https://designali.com/r/progress-02.json` |
| progress-03 | registry:example | Controlled progress indicator paired with an interactive slider control. | `npx shadcn@latest add https://designali.com/r/progress-03.json` |
| radio-group-01 | registry:example | Standard radio button group with text labels. | `npx shadcn@latest add https://designali.com/r/radio-group-01.json` |
| radio-group-02 | registry:example | Radio group integrated with field components for layout and detailed descriptions. | `npx shadcn@latest add https://designali.com/r/radio-group-02.json` |
| radio-group-03 | registry:example | Radio group styled as interactive choice cards with title and description fields. | `npx shadcn@latest add https://designali.com/r/radio-group-03.json` |
| resizable-01 | registry:example | Nested horizontal and vertical resizable panel groups with visible drag handles. | `npx shadcn@latest add https://designali.com/r/resizable-01.json` |
| resizable-02 | registry:example | Vertical resizable panel layout configured for header and content areas. | `npx shadcn@latest add https://designali.com/r/resizable-02.json` |
| resizable-03 | registry:example | Horizontal resizable panel layout with a drag handle icon for sidebar and main content. | `npx shadcn@latest add https://designali.com/r/resizable-03.json` |
| scroll-area-01 | registry:example | Vertical scroll area component displaying a long list with subtle dividers. | `npx shadcn@latest add https://designali.com/r/scroll-area-01.json` |
| scroll-area-02 | registry:example | Horizontal scroll area featuring image thumbnails and an explicit scroll bar orientation. | `npx shadcn@latest add https://designali.com/r/scroll-area-02.json` |
| select-01 | registry:example | Basic select dropdown component with grouped items and a clear placeholder state. | `npx shadcn@latest add https://designali.com/r/select-01.json` |
| select-02 | registry:example | Interactive select component with a toggle switch to dynamically adjust trigger alignment. | `npx shadcn@latest add https://designali.com/r/select-02.json` |
| select-03 | registry:example | Select dropdown featuring grouped categories separated by visual dividers. | `npx shadcn@latest add https://designali.com/r/select-03.json` |
| separator-01 | registry:example | Horizontal separator component dividing text content and headers. | `npx shadcn@latest add https://designali.com/r/separator-01.json` |
| separator-02 | registry:example | Vertical separator component used as a divider between inline navigation links. | `npx shadcn@latest add https://designali.com/r/separator-02.json` |
| separator-03 | registry:example | Multiple horizontal separators dividing items in a key-value list layout. | `npx shadcn@latest add https://designali.com/r/separator-03.json` |
| sheet-01 | registry:example | Slide-over sheet component with header, form fields, and footer actions. | `npx shadcn@latest add https://designali.com/r/sheet-01.json` |
| sheet-02 | registry:example | Sheet component featuring custom side placements and interaction options. | `npx shadcn@latest add https://designali.com/r/sheet-02.json` |
| skeleton-01 | registry:example | Basic skeleton loading state for an avatar and multi-line text block. | `npx shadcn@latest add https://designali.com/r/skeleton-01.json` |
| skeleton-02 | registry:example | Skeleton loader structured inside a card container with header and video placeholder. | `npx shadcn@latest add https://designali.com/r/skeleton-02.json` |
| skeleton-03 | registry:example | Complex skeleton placeholder layout for a data table or feed item. | `npx shadcn@latest add https://designali.com/r/skeleton-03.json` |
| slider-01 | registry:example | Basic single-thumb range slider component. | `npx shadcn@latest add https://designali.com/r/slider-01.json` |
| slider-02 | registry:example | Controlled dual-thumb range slider with label and dynamic value output. | `npx shadcn@latest add https://designali.com/r/slider-02.json` |
| slider-03 | registry:example | Slider component configured with custom step intervals and tick indicators. | `npx shadcn@latest add https://designali.com/r/slider-03.json` |
| slider-04 | registry:example | Vertical slider variant with boundary limits and disabled state showcase. | `npx shadcn@latest add https://designali.com/r/slider-04.json` |
| spinner-01 | registry:example | Loading spinner integrated within an item component to indicate an active processing state. | `npx shadcn@latest add https://designali.com/r/spinner-01.json` |
| spinner-02 | registry:example | Standalone spinner indicator with varying size and color utility configurations. | `npx shadcn@latest add https://designali.com/r/spinner-02.json` |
| switch-01 | registry:example | Basic toggle switch component paired with an inline text label. | `npx shadcn@latest add https://designali.com/r/switch-01.json` |
| switch-02 | registry:example | Grouped layout containing switches alongside titles and descriptions. | `npx shadcn@latest add https://designali.com/r/switch-02.json` |
| table-01 | registry:example | Standard data table display with caption, styled header, row items, and total calculation footer. | `npx shadcn@latest add https://designali.com/r/table-01.json` |
| table-02 | registry:example | Interactive data table with per-row dropdown action menus. | `npx shadcn@latest add https://designali.com/r/table-02.json` |
| tabs-01 | registry:example | Standard tabs layout with card components inside tab content panels. | `npx shadcn@latest add https://designali.com/r/tabs-01.json` |
| tabs-02 | registry:example | Tabs navigation rendered with an active underline indicator variant. | `npx shadcn@latest add https://designali.com/r/tabs-02.json` |
| textarea-01 | registry:example | Standard multi-line text input field component. | `npx shadcn@latest add https://designali.com/r/textarea-01.json` |
| textarea-02 | registry:example | Textarea input integrated within a field wrapper with label and helper description. | `npx shadcn@latest add https://designali.com/r/textarea-02.json` |
| toast-01 | registry:example | Actionable toast notification triggered via button interaction. | `npx shadcn@latest add https://designali.com/r/toast-01.json` |
| toast-02 | registry:example | Variant toast notifications displaying default, success, info, warning, and error states. | `npx shadcn@latest add https://designali.com/r/toast-02.json` |
| toggle-01 | registry:example | Small outline toggle button featuring an icon and text label. | `npx shadcn@latest add https://designali.com/r/toggle-01.json` |
| toggle-02 | registry:example | Group of outline toggle buttons for text formatting controls. | `npx shadcn@latest add https://designali.com/r/toggle-02.json` |
| toggle-group-01 | registry:example | Multiple-selection outline toggle group for text formatting icon controls. | `npx shadcn@latest add https://designali.com/r/toggle-group-01.json` |
| toggle-group-02 | registry:example | Outline toggle group for filter selection with a default active state. | `npx shadcn@latest add https://designali.com/r/toggle-group-02.json` |
| tooltip-01 | registry:example | Standard tooltip triggered by hovering over an outline button. | `npx shadcn@latest add https://designali.com/r/tooltip-01.json` |
| tooltip-02 | registry:example | Tooltips demonstrated across all directional sides (left, top, bottom, right). | `npx shadcn@latest add https://designali.com/r/tooltip-02.json` |
| counter-number-default | registry:component | Counter Number | `npx shadcn@latest add https://designali.com/r/counter-number-default.json` |
| counter-number-currency | registry:component | Counter Number | `npx shadcn@latest add https://designali.com/r/counter-number-currency.json` |
| counter-number-custom | registry:component | Counter Number | `npx shadcn@latest add https://designali.com/r/counter-number-custom.json` |
| counter-number-decimal | registry:component | Counter Number | `npx shadcn@latest add https://designali.com/r/counter-number-decimal.json` |
| counter-number-percentage | registry:component | Counter Number | `npx shadcn@latest add https://designali.com/r/counter-number-percentage.json` |
| counter-number-prefix | registry:component | Counter Number | `npx shadcn@latest add https://designali.com/r/counter-number-prefix.json` |
| counter-number-seperator | registry:component | Counter Number | `npx shadcn@latest add https://designali.com/r/counter-number-seperator.json` |
| dot-pattern-default | registry:component | component showing a simple dot pattern. | `npx shadcn@latest add https://designali.com/r/dot-pattern-default.json` |
| dot-pattern-custom | registry:component | component showing a simple dot pattern. | `npx shadcn@latest add https://designali.com/r/dot-pattern-custom.json` |
| dot-pattern-01 | registry:component | component showing a simple dot pattern. | `npx shadcn@latest add https://designali.com/r/dot-pattern-01.json` |
| dot-pattern-02 | registry:component | component showing a simple dot pattern. | `npx shadcn@latest add https://designali.com/r/dot-pattern-02.json` |
| dot-pattern-03 | registry:component | component showing a simple dot pattern. | `npx shadcn@latest add https://designali.com/r/dot-pattern-03.json` |
| gauge-demo-basic | registry:component | Basic gauge demo | `npx shadcn@latest add https://designali.com/r/gauge-demo-basic.json` |
| gauge-demo-custom-value | registry:component | Gauge with custom value text | `npx shadcn@latest add https://designali.com/r/gauge-demo-custom-value.json` |
| gauge-demo-sizes | registry:component | Gauge size variations | `npx shadcn@latest add https://designali.com/r/gauge-demo-sizes.json` |
| gauge-demo-thickness | registry:component | Gauge thickness variations | `npx shadcn@latest add https://designali.com/r/gauge-demo-thickness.json` |
| gauge-demo-gap | registry:component | Gauge gap variations | `npx shadcn@latest add https://designali.com/r/gauge-demo-gap.json` |
| gauge-demo-segments | registry:component | Gauge segment variations | `npx shadcn@latest add https://designali.com/r/gauge-demo-segments.json` |
| gauge-demo-angles | registry:component | Gauge angle variations | `npx shadcn@latest add https://designali.com/r/gauge-demo-angles.json` |
| gauge-demo-radius | registry:component | Gauge radius customization | `npx shadcn@latest add https://designali.com/r/gauge-demo-radius.json` |
| gauge-demo-states | registry:component | Gauge loading and complete states | `npx shadcn@latest add https://designali.com/r/gauge-demo-states.json` |
| gauge-demo-range | registry:component | Gauge with custom min and max ranges | `npx shadcn@latest add https://designali.com/r/gauge-demo-range.json` |
| gauge-demo-label | registry:component | Gauge with label | `npx shadcn@latest add https://designali.com/r/gauge-demo-label.json` |
| gauge-demo-custom-content | registry:component | Gauge with custom center content | `npx shadcn@latest add https://designali.com/r/gauge-demo-custom-content.json` |
| gauge-demo-biomarker | registry:component | Biomarker gauge components | `npx shadcn@latest add https://designali.com/r/gauge-demo-biomarker.json` |
| gauge-demo-multiple | registry:component | Multiple gauges displayed together | `npx shadcn@latest add https://designali.com/r/gauge-demo-multiple.json` |
| gauge-demo-combined | registry:component | Combined gauge composition demo | `npx shadcn@latest add https://designali.com/r/gauge-demo-combined.json` |
| bento-01 | registry:component | component showing a simple bento. | `npx shadcn@latest add https://designali.com/r/bento-01.json` |
| bento-02 | registry:component | component showing a simple bento. | `npx shadcn@latest add https://designali.com/r/bento-02.json` |
| bento-03 | registry:component | component showing a simple bento. | `npx shadcn@latest add https://designali.com/r/bento-03.json` |
| bento-04 | registry:component | component showing a simple bento. | `npx shadcn@latest add https://designali.com/r/bento-04.json` |
| bento-05 | registry:component | component showing a simple bento. | `npx shadcn@latest add https://designali.com/r/bento-05.json` |
| grid-pattern-default | registry:component | component showing a simple grid pattern. | `npx shadcn@latest add https://designali.com/r/grid-pattern-default.json` |
| grid-pattern-custom | registry:component | component showing a simple grid pattern. | `npx shadcn@latest add https://designali.com/r/grid-pattern-custom.json` |
| grid-pattern-large | registry:component | component showing a simple grid pattern. | `npx shadcn@latest add https://designali.com/r/grid-pattern-large.json` |
| grid-pattern-small | registry:component | component showing a simple grid pattern. | `npx shadcn@latest add https://designali.com/r/grid-pattern-small.json` |
| grid-pattern-01 | registry:component | component showing a simple grid pattern. | `npx shadcn@latest add https://designali.com/r/grid-pattern-01.json` |
| marquee-01 | registry:component | Marquee | `npx shadcn@latest add https://designali.com/r/marquee-01.json` |
| marquee-02 | registry:component | Marquee | `npx shadcn@latest add https://designali.com/r/marquee-02.json` |
| marquee-03 | registry:component | Marquee | `npx shadcn@latest add https://designali.com/r/marquee-03.json` |
| marquee-04 | registry:component | Marquee | `npx shadcn@latest add https://designali.com/r/marquee-04.json` |
| marquee-05 | registry:component | Marquee | `npx shadcn@latest add https://designali.com/r/marquee-05.json` |
| typewriter-01 | registry:component | component showing a simple typewriter. | `npx shadcn@latest add https://designali.com/r/typewriter-01.json` |
| typewriter-02 | registry:component | component showing a simple typewriter. | `npx shadcn@latest add https://designali.com/r/typewriter-02.json` |
| typewriter-03 | registry:component | component showing a simple typewriter. | `npx shadcn@latest add https://designali.com/r/typewriter-03.json` |
| typewriter-04 | registry:component | component showing a simple typewriter. | `npx shadcn@latest add https://designali.com/r/typewriter-04.json` |
| typewriter-05 | registry:component | component showing a simple typewriter. | `npx shadcn@latest add https://designali.com/r/typewriter-05.json` |

## For AI agents

```text
You are adding components from @designali to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/designali.md) for the component list.
2. Fetch the machine-readable index: https://designali.com/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: designali).
```