---
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", "audio", "auth", "blocks", "buttons", "cards", "components", "dashboard", "developer-tools", "e-commerce", "editor", "forms", "icons", "maps", "media", "navigation", "overlays"]
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: 18
generated_at: "2026-09-21T01:50:16.753Z"
---

# @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 (18)

| name | type | description | install |
| --- | --- | --- | --- |
| surfaces | registry:theme | Eight-level surface and shadow ladder for elevation. Light: two color steps then flat white, differentiated by shadow. Dark: additive white-opacity ladder with… | `npx shadcn@latest add https://deltacomponents.dev/r/surfaces.json` |
| tokens | registry:theme | Shared interaction-state tokens: surface-relative hover/active overlays (bg-hover, bg-active), the selected fill, the destructive-light ground, the --overlay R… | `npx shadcn@latest add https://deltacomponents.dev/r/tokens.json` |
| utils | registry:lib | Utility function for merging Tailwind CSS classes with clsx and tailwind-merge. | `npx shadcn@latest add https://deltacomponents.dev/r/utils.json` |
| motion | registry:lib | Three duration tiers and one easing, as CSS custom properties: --motion-fast/moderate/slow with a matching -exit for each, and --motion-ease, the settle curve … | `npx shadcn@latest add https://deltacomponents.dev/r/motion.json` |
| font-weight | registry:lib | Variable font weight tokens for Inter (normal, medium, semibold, bold) using font-variation-settings. | `npx shadcn@latest add https://deltacomponents.dev/r/font-weight.json` |
| surface-context | registry:lib | React context that tracks the current substrate elevation level. Elevated components (Dropdown, Select, etc.) read it via useSurface() and render at substrate … | `npx shadcn@latest add https://deltacomponents.dev/r/surface-context.json` |
| surface-classes | registry:lib | Static lookup tables for bg-surface-N and shadow-surface-N utilities. Required because Tailwind v4 cannot detect template-literal class names. | `npx shadcn@latest add https://deltacomponents.dev/r/surface-classes.json` |
| icon-context | registry:lib | Named icon slots with a Lucide default set; swap any icon via IconProvider. | `npx shadcn@latest add https://deltacomponents.dev/r/icon-context.json` |
| clipboard | registry:lib | Copy text to the clipboard, falling back to a selection and execCommand where the async Clipboard API is unavailable — which includes any page served over plai… | `npx shadcn@latest add https://deltacomponents.dev/r/clipboard.json` |
| button | registry:ui | Versatile button with variants, sizes, loading state, and icon support. | `npx shadcn@latest add https://deltacomponents.dev/r/button.json` |
| tooltip | registry:ui | Floating tooltip with configurable placement, a follow-cursor mode, and rich content support. | `npx shadcn@latest add https://deltacomponents.dev/r/tooltip.json` |
| tabs | registry:ui | Tab navigation with underline, background, and ghost variants, and an indicator that follows the shape system. | `npx shadcn@latest add https://deltacomponents.dev/r/tabs.json` |
| code | registry:ui | Syntax-highlighted code with a copy button, a filename bar, and a package-manager tab strip. | `npx shadcn@latest add https://deltacomponents.dev/r/code.json` |
| product-card | registry:ui | Compound card for commerce rows — image well, overlaid badge, and a title/subtitle/metric footer. | `npx shadcn@latest add https://deltacomponents.dev/r/product-card.json` |
| glyph | registry:ui | The Twitter/X-style verified checkmark, with the check cut out of the rosette as a real hole via an SVG mask so whatever sits behind it shows through. | `npx shadcn@latest add https://deltacomponents.dev/r/glyph.json` |
| alert | registry:ui | Inline callout carried by a pastel fill alone, no border or icon, that turns into pastel ink on a faint wash in dark mode. | `npx shadcn@latest add https://deltacomponents.dev/r/alert.json` |
| editor | registry:ui | Always-on live-preview markdown editor: one surface that is both the rendered document and the text you type into, with debounced autosave and a per-construct … | `npx shadcn@latest add https://deltacomponents.dev/r/editor.json` |
| mp3-player | registry:ui | Inline audio player with a transport, an elapsed/remaining clock, and a seek bar that renders as a line or a waveform of precomputed peaks. | `npx shadcn@latest add https://deltacomponents.dev/r/mp3-player.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).
```