---
name: "@delta"
slug: "delta"
description: "A modern shadcn/ui registry by Patrick Prunty covering AI and media-rich interface components: streaming LLM chat widget, zoomable images, swipeable card deck, Mapbox map pointer, QR code generator, OTP input, code block, admonition/callout, scroll-fade effect, tabs, product card, and X (Twitter) card. Also includes dashboard and landing-page section blocks. Built with React and Tailwind CSS; v0-compatible. Free and MIT-licensed. Use for: adding a curated set of AI chat, media display, and map components to a shadcn project in one registry pull."
category: "Component library (general)"
tags: ["ai", "animation", "auth", "backgrounds", "blocks", "buttons", "cards", "components", "dashboard", "developer-tools", "e-commerce", "forms", "hooks", "icons", "loaders", "maps", "marketing", "media", "mobile", "navigation", "theming"]
framework: "react"
license: "MIT"
author: "pprunty"
website: "https://deltacomponents.dev"
github: "https://github.com/pprunty/deltacomponents.dev"
registry: "https://deltacomponents.dev/r/registry.json"
pro: false
pro_url: null
github_stars: 11
component_count: 93
generated_at: "2026-07-28T08:00:50.948Z"
---

# @delta

A modern shadcn/ui registry by Patrick Prunty covering AI and media-rich interface components: streaming LLM chat widget, zoomable images, swipeable card deck, Mapbox map pointer, QR code generator, OTP input, code block, admonition/callout, scroll-fade effect, tabs, product card, and X (Twitter) card. Also includes dashboard and landing-page section blocks. Built with React and Tailwind CSS; v0-compatible. Free and MIT-licensed. Use for: adding a curated set of AI chat, media display, and map components to a shadcn project in one registry pull.

## Links

- Website: https://deltacomponents.dev
- GitHub: https://github.com/pprunty/deltacomponents.dev
- Registry JSON: https://deltacomponents.dev/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/delta
- This file: https://sh4dcn.vercel.app/md/delta.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://deltacomponents.dev/r/registry.json
pnpm dlx shadcn@latest add https://deltacomponents.dev/r/registry.json
bunx shadcn@latest add https://deltacomponents.dev/r/registry.json
# clone the source repo
git clone https://github.com/pprunty/deltacomponents.dev.git
# fetch the raw registry index
curl -s https://deltacomponents.dev/r/registry.json
```

## Components (93)

| name | type | description | install |
| --- | --- | --- | --- |
| index | registry:style | — | `npx shadcn@latest add https://deltacomponents.dev/r/index.json` |
| style | registry:style | — | `npx shadcn@latest add https://deltacomponents.dev/r/style.json` |
| input-otp | registry:ui | — | `npx shadcn@latest add https://deltacomponents.dev/r/input-otp.json` |
| navigation-menu | registry:ui | — | `npx shadcn@latest add https://deltacomponents.dev/r/navigation-menu.json` |
| code-block-icons | registry:ui | — | `npx shadcn@latest add https://deltacomponents.dev/r/code-block-icons.json` |
| code-block | registry:ui | — | `npx shadcn@latest add https://deltacomponents.dev/r/code-block.json` |
| copy-button | registry:ui | — | `npx shadcn@latest add https://deltacomponents.dev/r/copy-button.json` |
| cambio-image | registry:ui | — | `npx shadcn@latest add https://deltacomponents.dev/r/cambio-image.json` |
| card-deck | registry:ui | — | `npx shadcn@latest add https://deltacomponents.dev/r/card-deck.json` |
| admonition | registry:ui | — | `npx shadcn@latest add https://deltacomponents.dev/r/admonition.json` |
| x-scrollable | registry:ui | — | `npx shadcn@latest add https://deltacomponents.dev/r/x-scrollable.json` |
| scroll-fade-effect | registry:ui | — | `npx shadcn@latest add https://deltacomponents.dev/r/scroll-fade-effect.json` |
| tabs | registry:ui | — | `npx shadcn@latest add https://deltacomponents.dev/r/tabs.json` |
| qrcode | registry:ui | — | `npx shadcn@latest add https://deltacomponents.dev/r/qrcode.json` |
| chat | registry:ui | — | `npx shadcn@latest add https://deltacomponents.dev/r/chat.json` |
| mapbox-pointer | registry:ui | — | `npx shadcn@latest add https://deltacomponents.dev/r/mapbox-pointer.json` |
| x-card | registry:ui | — | `npx shadcn@latest add https://deltacomponents.dev/r/x-card.json` |
| marquee | registry:ui | — | `npx shadcn@latest add https://deltacomponents.dev/r/marquee.json` |
| product-card | registry:ui | — | `npx shadcn@latest add https://deltacomponents.dev/r/product-card.json` |
| ai-chat-sidebar | registry:block | A collapsible sidebar component for AI chat applications | `npx shadcn@latest add https://deltacomponents.dev/r/ai-chat-sidebar.json` |
| testimonials | registry:block | Customer testimonials grid | `npx shadcn@latest add https://deltacomponents.dev/r/testimonials.json` |
| interactive-feature-showcase | registry:block | InteractiveFeatureShowcase block | `npx shadcn@latest add https://deltacomponents.dev/r/interactive-feature-showcase.json` |
| chatbot-window | registry:block | Resizable AI chatbot interface with collapsible sidebar | `npx shadcn@latest add https://deltacomponents.dev/r/chatbot-window.json` |
| bottom-mobile-nav | registry:block | BottomMobileNav block | `npx shadcn@latest add https://deltacomponents.dev/r/bottom-mobile-nav.json` |
| mapbox-grid-block | registry:block | Three-column grid showcasing global locations with Mapbox maps | `npx shadcn@latest add https://deltacomponents.dev/r/mapbox-grid-block.json` |
| admin-inset-layout | registry:block | Admin dashboard layout with inset sidebar | `npx shadcn@latest add https://deltacomponents.dev/r/admin-inset-layout.json` |
| saas-header-layout | registry:block | SaaS header layout with navigation menu | `npx shadcn@latest add https://deltacomponents.dev/r/saas-header-layout.json` |
| saas-dashboard | registry:block | SaaS dashboard with inset sidebar and navigation | `npx shadcn@latest add https://deltacomponents.dev/r/saas-dashboard.json` |
| auth-form | registry:block | Authentication form with SSO, email, passkey, and SAML options | `npx shadcn@latest add https://deltacomponents.dev/r/auth-form.json` |
| use-mobile | registry:hook | — | `npx shadcn@latest add https://deltacomponents.dev/r/use-mobile.json` |
| input-otp-demo | registry:example | — | `npx shadcn@latest add https://deltacomponents.dev/r/input-otp-demo.json` |
| input-otp-pill-demo | registry:example | — | `npx shadcn@latest add https://deltacomponents.dev/r/input-otp-pill-demo.json` |
| input-otp-separator-demo | registry:example | — | `npx shadcn@latest add https://deltacomponents.dev/r/input-otp-separator-demo.json` |
| input-otp-form-demo | registry:example | — | `npx shadcn@latest add https://deltacomponents.dev/r/input-otp-form-demo.json` |
| product-card-demo | registry:example | — | `npx shadcn@latest add https://deltacomponents.dev/r/product-card-demo.json` |
| product-card-inner-demo | registry:example | — | `npx shadcn@latest add https://deltacomponents.dev/r/product-card-inner-demo.json` |
| product-card-custom-demo | registry:example | — | `npx shadcn@latest add https://deltacomponents.dev/r/product-card-custom-demo.json` |
| product-card-size-demo | registry:example | — | `npx shadcn@latest add https://deltacomponents.dev/r/product-card-size-demo.json` |
| product-card-grid-demo | registry:example | — | `npx shadcn@latest add https://deltacomponents.dev/r/product-card-grid-demo.json` |
| navigation-menu-demo | registry:example | — | `npx shadcn@latest add https://deltacomponents.dev/r/navigation-menu-demo.json` |
| x-card-demo | registry:example | — | `npx shadcn@latest add https://deltacomponents.dev/r/x-card-demo.json` |
| x-card-basic-demo | registry:example | — | `npx shadcn@latest add https://deltacomponents.dev/r/x-card-basic-demo.json` |
| x-card-interactive-demo | registry:example | — | `npx shadcn@latest add https://deltacomponents.dev/r/x-card-interactive-demo.json` |
| marquee-stacked-demo | registry:example | — | `npx shadcn@latest add https://deltacomponents.dev/r/marquee-stacked-demo.json` |
| marquee-cards-demo | registry:example | — | `npx shadcn@latest add https://deltacomponents.dev/r/marquee-cards-demo.json` |
| marquee-demo | registry:example | — | `npx shadcn@latest add https://deltacomponents.dev/r/marquee-demo.json` |
| mapbox-pointer-demo | registry:example | — | `npx shadcn@latest add https://deltacomponents.dev/r/mapbox-pointer-demo.json` |
| mapbox-pointer-style-demo | registry:example | — | `npx shadcn@latest add https://deltacomponents.dev/r/mapbox-pointer-style-demo.json` |
| mapbox-pointer-theme-demo | registry:example | — | `npx shadcn@latest add https://deltacomponents.dev/r/mapbox-pointer-theme-demo.json` |
| chat-demo | registry:example | — | `npx shadcn@latest add https://deltacomponents.dev/r/chat-demo.json` |
| chat-previous-messages-demo | registry:example | — | `npx shadcn@latest add https://deltacomponents.dev/r/chat-previous-messages-demo.json` |
| chat-simple-demo | registry:example | — | `npx shadcn@latest add https://deltacomponents.dev/r/chat-simple-demo.json` |
| code-block-demo | registry:example | — | `npx shadcn@latest add https://deltacomponents.dev/r/code-block-demo.json` |
| code-block-package-demo | registry:example | — | `npx shadcn@latest add https://deltacomponents.dev/r/code-block-package-demo.json` |
| code-block-theme-demo | registry:example | — | `npx shadcn@latest add https://deltacomponents.dev/r/code-block-theme-demo.json` |
| code-block-interactive-demo | registry:example | — | `npx shadcn@latest add https://deltacomponents.dev/r/code-block-interactive-demo.json` |
| code-block-markdown-string-demo | registry:example | — | `npx shadcn@latest add https://deltacomponents.dev/r/code-block-markdown-string-demo.json` |
| code-block-npx-markdown-demo | registry:example | — | `npx shadcn@latest add https://deltacomponents.dev/r/code-block-npx-markdown-demo.json` |
| code-block-package-manager-demo | registry:example | — | `npx shadcn@latest add https://deltacomponents.dev/r/code-block-package-manager-demo.json` |
| code-block-python-demo | registry:example | — | `npx shadcn@latest add https://deltacomponents.dev/r/code-block-python-demo.json` |
| code-block-json-demo | registry:example | — | `npx shadcn@latest add https://deltacomponents.dev/r/code-block-json-demo.json` |
| code-block-expand-demo | registry:example | — | `npx shadcn@latest add https://deltacomponents.dev/r/code-block-expand-demo.json` |
| cambio-image-demo | registry:example | — | `npx shadcn@latest add https://deltacomponents.dev/r/cambio-image-demo.json` |
| cambio-image-grid-demo | registry:example | — | `npx shadcn@latest add https://deltacomponents.dev/r/cambio-image-grid-demo.json` |
| cambio-image-dismiss-on-scroll-demo | registry:example | — | `npx shadcn@latest add https://deltacomponents.dev/r/cambio-image-dismiss-on-scroll-demo.json` |
| cambio-image-motion-preset-demo | registry:example | — | `npx shadcn@latest add https://deltacomponents.dev/r/cambio-image-motion-preset-demo.json` |
| cambio-image-icons-expand-demo | registry:example | — | `npx shadcn@latest add https://deltacomponents.dev/r/cambio-image-icons-expand-demo.json` |
| cambio-image-close-button-demo | registry:example | — | `npx shadcn@latest add https://deltacomponents.dev/r/cambio-image-close-button-demo.json` |
| qrcode-demo | registry:example | — | `npx shadcn@latest add https://deltacomponents.dev/r/qrcode-demo.json` |
| qrcode-purple-dots-demo | registry:example | — | `npx shadcn@latest add https://deltacomponents.dev/r/qrcode-purple-dots-demo.json` |
| qrcode-demo-interactive | registry:example | — | `npx shadcn@latest add https://deltacomponents.dev/r/qrcode-demo-interactive.json` |
| qrcode-logo-demo | registry:example | — | `npx shadcn@latest add https://deltacomponents.dev/r/qrcode-logo-demo.json` |
| card-deck-demo | registry:example | — | `npx shadcn@latest add https://deltacomponents.dev/r/card-deck-demo.json` |
| card-deck-demo-interactive | registry:example | — | `npx shadcn@latest add https://deltacomponents.dev/r/card-deck-demo-interactive.json` |
| admonition-demo | registry:example | — | `npx shadcn@latest add https://deltacomponents.dev/r/admonition-demo.json` |
| admonition-demo-interactive | registry:example | — | `npx shadcn@latest add https://deltacomponents.dev/r/admonition-demo-interactive.json` |
| admonition-custom-icon-demo | registry:example | — | `npx shadcn@latest add https://deltacomponents.dev/r/admonition-custom-icon-demo.json` |
| admonition-dismissible-demo | registry:example | — | `npx shadcn@latest add https://deltacomponents.dev/r/admonition-dismissible-demo.json` |
| admonition-actions-demo | registry:example | — | `npx shadcn@latest add https://deltacomponents.dev/r/admonition-actions-demo.json` |
| admonition-collapsible-demo | registry:example | — | `npx shadcn@latest add https://deltacomponents.dev/r/admonition-collapsible-demo.json` |
| tabs-demo | registry:example | — | `npx shadcn@latest add https://deltacomponents.dev/r/tabs-demo.json` |
| tabs-background-demo | registry:example | — | `npx shadcn@latest add https://deltacomponents.dev/r/tabs-background-demo.json` |
| tabs-no-background-demo | registry:example | — | `npx shadcn@latest add https://deltacomponents.dev/r/tabs-no-background-demo.json` |
| tabs-sizes-demo | registry:example | — | `npx shadcn@latest add https://deltacomponents.dev/r/tabs-sizes-demo.json` |
| tabs-with-icons-demo | registry:example | — | `npx shadcn@latest add https://deltacomponents.dev/r/tabs-with-icons-demo.json` |
| tabs-entrance-animation-demo | registry:example | — | `npx shadcn@latest add https://deltacomponents.dev/r/tabs-entrance-animation-demo.json` |
| tabs-in-scroll-area-demo | registry:example | — | `npx shadcn@latest add https://deltacomponents.dev/r/tabs-in-scroll-area-demo.json` |
| card-deck-yugioh-demo | registry:example | — | `npx shadcn@latest add https://deltacomponents.dev/r/card-deck-yugioh-demo.json` |
| card-deck-balatro-demo | registry:example | — | `npx shadcn@latest add https://deltacomponents.dev/r/card-deck-balatro-demo.json` |
| chat-shimmer-demo | registry:example | — | `npx shadcn@latest add https://deltacomponents.dev/r/chat-shimmer-demo.json` |
| chat-reasoning-demo | registry:example | — | `npx shadcn@latest add https://deltacomponents.dev/r/chat-reasoning-demo.json` |
| scroll-fade-effect-demo | registry:example | — | `npx shadcn@latest add https://deltacomponents.dev/r/scroll-fade-effect-demo.json` |
| scroll-fade-effect-slider-demo | registry:example | — | `npx shadcn@latest add https://deltacomponents.dev/r/scroll-fade-effect-slider-demo.json` |

## For AI agents

```text
You are adding components from @delta to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/delta.md) for the component list.
2. Fetch the machine-readable index: https://deltacomponents.dev/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: delta).
```