---
name: "@uniquel"
slug: "uniquel"
description: "Minimalist components for React / Next.js: animated backgrounds, galleries, badges, and conversion blocks. Built with Tailwind CSS and Motion, installable with the shadcn CLI."
category: "Animated components"
tags: ["animation", "backgrounds", "blocks", "buttons", "cards", "forms", "glassmorphism", "icons", "loaders", "media", "navigation", "onboarding", "overlays", "pro-available"]
framework: "react"
license: null
author: null
website: "https://uniquel.io"
github: null
registry: "https://uniquel.io/r/registry.json"
pro: true
pro_url: "https://uniquel.io/pricing"
github_stars: null
component_count: 58
generated_at: "2026-10-27T06:34:08.542Z"
---

# @uniquel

Minimalist components for React / Next.js: animated backgrounds, galleries, badges, and conversion blocks. Built with Tailwind CSS and Motion, installable with the shadcn CLI.

## Links

- Website: https://uniquel.io
- Registry JSON: https://uniquel.io/r/registry.json
- Directory page: https://sh4dcn.netlify.app/registry/uniquel
- This file: https://sh4dcn.netlify.app/md/uniquel.md
- Pro / pricing: https://uniquel.io/pricing

## Install

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

## Components (58)

| name | type | description | install |
| --- | --- | --- | --- |
| pin-input | registry:component | A six-digit PIN input with paste support and keyboard navigation for verification codes. | `npx shadcn@latest add https://uniquel.io/r/pin-input.json` |
| search-input-with-icon | registry:component | A premium search input with a focused state and an icon that becomes a submit action as you type. | `npx shadcn@latest add https://uniquel.io/r/search-input-with-icon.json` |
| typing-animation | registry:component | A minimal typing animation with smart backspacing, an optional cursor, and adjustable speed. | `npx shadcn@latest add https://uniquel.io/r/typing-animation.json` |
| confetti-fireworks | registry:component | A button-triggered canvas confetti burst with a center launch and three quick side volleys. | `npx shadcn@latest add https://uniquel.io/r/confetti-fireworks.json` |
| iphone-duo-closed-mockup | registry:component | A single folded iPhone Duo with a replaceable 1398 × 2034 external display and polished silver frame. | `npx shadcn@latest add https://uniquel.io/r/iphone-duo-closed-mockup.json` |
| iphone-duo-open-mockup | registry:component | A single fully open iPhone Duo with a flat, replaceable 2670 × 1878 display and subtle hinge detail. | `npx shadcn@latest add https://uniquel.io/r/iphone-duo-open-mockup.json` |
| iphone-duo-mockup | registry:component | A silver foldable concept with polished edges, dual cameras, and one easily replaceable screenshot. | `npx shadcn@latest add https://uniquel.io/r/iphone-duo-mockup.json` |
| wavy-tide | registry:component | Animated canvas waves that fill the container and drift with the pointer - a softer, SaaS-ready take on classic wavy backgrounds. | `npx shadcn@latest add https://uniquel.io/r/wavy-tide.json` |
| meteor-shower | registry:component | Subtle canvas meteors drifting across a dark sky - a quiet animated background for heroes and landing sections. | `npx shadcn@latest add https://uniquel.io/r/meteor-shower.json` |
| neon-flow | registry:component | Staggered neon trails that sweep across a dark field - colors are prop-driven for easy theming. | `npx shadcn@latest add https://uniquel.io/r/neon-flow.json` |
| desert-dune | registry:component | Soft layered waves in parallax drift - cool indigo tones by default, colors via props. | `npx shadcn@latest add https://uniquel.io/r/desert-dune.json` |
| aurora | registry:component | Minimal aurora borealis light - fanned curtains in tones of a single green, drifting slowly across a deep night sky. | `npx shadcn@latest add https://uniquel.io/r/aurora.json` |
| coverflow-gallery | registry:component | 3D coverflow carousel with keyboard, dot nav, and optional autoplay that pauses on hover. | `npx shadcn@latest add https://uniquel.io/r/coverflow-gallery.json` |
| arch-gallery | registry:component | Fanned photo arch with center-forward stacking; hover lifts a card and scales it up. | `npx shadcn@latest add https://uniquel.io/r/arch-gallery.json` |
| integration-hub | registry:component | Brand hub with a pyramid of connected apps and a looping pulse that travels down each branch. | `npx shadcn@latest add https://uniquel.io/r/integration-hub.json` |
| avatar-stack | registry:component | Layered portraits with grayscale-to-color hover, spring lift, and a glass +N counter. | `npx shadcn@latest add https://uniquel.io/r/avatar-stack.json` |
| rating-badge | registry:component | Editorial rating with sequentially drawn stars, review count, and a soft luminous edge. | `npx shadcn@latest add https://uniquel.io/r/rating-badge.json` |
| promo-pill | registry:component | Translucent offer marker with a low-frequency glow pulse and optional dismiss. | `npx shadcn@latest add https://uniquel.io/r/promo-pill.json` |
| button-group | registry:component | Primary and secondary actions as one unit - depth on hover, underline reveal on the quiet CTA. | `npx shadcn@latest add https://uniquel.io/r/button-group.json` |
| feature-chip | registry:component | Minimal metadata token with an independent icon hover and soft selected bloom. | `npx shadcn@latest add https://uniquel.io/r/feature-chip.json` |
| integration-badge | registry:component | Sculptural app mark in a precise tile - muted to full color with a near-imperceptible lift. | `npx shadcn@latest add https://uniquel.io/r/integration-badge.json` |
| accordion-chevron | registry:component | Minimal accordion with a subtly animated chevron for compact FAQs and supporting details. | `npx shadcn@latest add https://uniquel.io/r/accordion-chevron.json` |
| scroll-progress-indicator | registry:component | A circular scroll progress indicator that doubles as a compact return-to-top control. | `npx shadcn@latest add https://uniquel.io/r/scroll-progress-indicator.json` |
| reading-progress | registry:component | A drawn-line progress indicator with spring-smoothed scroll tracking and a fading percentage. | `npx shadcn@latest add https://uniquel.io/r/reading-progress.json` |
| quote-highlight | registry:component | Editorial pull quote with oversized glyph, expanding rule, and blurred fade-in. | `npx shadcn@latest add https://uniquel.io/r/quote-highlight.json` |
| announcement-bar | registry:component | Restrained product update strip with gradient sheen and a clean collapse dismiss. | `npx shadcn@latest add https://uniquel.io/r/announcement-bar.json` |
| language-selector | registry:component | Minimal locale control with scaled blur-sm menu and staggered options - no native select chrome. | `npx shadcn@latest add https://uniquel.io/r/language-selector.json` |
| spinner-overlay | registry:component | A centered spinner overlay for blocking a page or panel while content loads. | `npx shadcn@latest add https://uniquel.io/r/spinner-overlay.json` |
| bouncing-dots-overlay | registry:component | A light three-dot loading overlay with staggered motion. | `npx shadcn@latest add https://uniquel.io/r/bouncing-dots-overlay.json` |
| wave-bars-overlay | registry:component | Five staggered bars that create a compact equalizer-style loading overlay. | `npx shadcn@latest add https://uniquel.io/r/wave-bars-overlay.json` |
| skeleton-overlay | registry:component | A card-shaped skeleton overlay for loading dashboards, forms, and content panels. | `npx shadcn@latest add https://uniquel.io/r/skeleton-overlay.json` |
| compact-card | registry:component | Editorial card with a full-bleed image, story metadata, and optional link wrapper. | `npx shadcn@latest add https://uniquel.io/r/compact-card.json` |
| horizontal-card | registry:component | Side-by-side product card with image, price, and a clear action. | `npx shadcn@latest add https://uniquel.io/r/horizontal-card.json` |
| metric-card | registry:component | Compact dashboard metric with a trend badge and inline sparkline. | `npx shadcn@latest add https://uniquel.io/r/metric-card.json` |
| card-stack | registry:component | Layered testimonial cards that cycle forward with a spring stack. Click the front card to advance. | `npx shadcn@latest add https://uniquel.io/r/card-stack.json` |
| dark-mode-toggle | registry:component | Compact sun and moon switch that persists theme preference and toggles the document dark class. | `npx shadcn@latest add https://uniquel.io/r/dark-mode-toggle.json` |
| pagination-with-ellipsis | registry:component | Numbered pagination that keeps the current page visible and collapses long ranges with ellipses. | `npx shadcn@latest add https://uniquel.io/r/pagination-with-ellipsis.json` |
| pagination-with-dots | registry:component | Compact pagination controls with arrows and dots by default, plus optional page numbers. | `npx shadcn@latest add https://uniquel.io/r/pagination-with-dots.json` |
| react-stepper | registry:component | Minimal React stepper with clear completed, current, and upcoming states for multi-step flows. | `npx shadcn@latest add https://uniquel.io/r/react-stepper.json` |
| horizontal-react-splitter | registry:component | A clean side-by-side React splitter for inboxes, editors, and dashboard layouts. | `npx shadcn@latest add https://uniquel.io/r/horizontal-react-splitter.json` |
| vertical-react-splitter | registry:component | A stacked React splitter for charts, activity feeds, consoles, and detail panels. | `npx shadcn@latest add https://uniquel.io/r/vertical-react-splitter.json` |
| nested-react-splitter | registry:component | A flexible React splitter layout with an independent sidebar and stacked workspace panels. | `npx shadcn@latest add https://uniquel.io/r/nested-react-splitter.json` |
| input-spinner | registry:component | A minimalist input spinner for choosing quantities with buttons, typing, or arrow keys. | `npx shadcn@latest add https://uniquel.io/r/input-spinner.json` |
| vertical-slider | registry:component | A vertical range input with configurable value labels, thumb shapes, colors, and height. | `npx shadcn@latest add https://uniquel.io/r/vertical-slider.json` |
| background-grid | registry:component | A static 3D background grid - a glowing wireframe perspective grid that recedes into the dark, with depth from atmospheric falloff and light pooling at each in… | `npx shadcn@latest add https://uniquel.io/r/background-grid.json` |
| scrollable-carousel | registry:component | Responsive horizontal carousel with native scrolling, scroll snapping, and accessible previous and next controls. | `npx shadcn@latest add https://uniquel.io/r/scrollable-carousel.json` |
| svg-blob-animation | registry:component | Lightweight SVG blob that smoothly morphs between organic shapes with customizable colors and speed. | `npx shadcn@latest add https://uniquel.io/r/svg-blob-animation.json` |
| react-search-bar | registry:component | Accessible React search bar with highlighted results, keyboard navigation, and polished loading and empty states. | `npx shadcn@latest add https://uniquel.io/r/react-search-bar.json` |
| file-upload-component | registry:component | Polished file upload component with drag and drop, validation, progress, errors, and removable file rows. | `npx shadcn@latest add https://uniquel.io/r/file-upload-component.json` |
| animated-next-button | registry:component | Compact next button with a looping arrow reveal, crisp press feedback, and loading and disabled states. | `npx shadcn@latest add https://uniquel.io/r/animated-next-button.json` |
| animated-slider | registry:component | Premium animated image and content slider with directional transitions, swipe gestures, captions, and numbered progress. | `npx shadcn@latest add https://uniquel.io/r/animated-slider.json` |
| liquid-button | registry:component | Minimal liquid button with a curved dark fill that rises on hover, focus, and press. | `npx shadcn@latest add https://uniquel.io/r/liquid-button.json` |
| skeleton-loader | registry:component | Reusable skeleton loader with rounded shapes and a quiet reduced-motion shimmer. | `npx shadcn@latest add https://uniquel.io/r/skeleton-loader.json` |
| spinner-component | registry:component | Thin inline loading spinner sized for buttons, cards, and compact panels. | `npx shadcn@latest add https://uniquel.io/r/spinner-component.json` |
| react-number-input | registry:component | Labeled React number input with an optional unit, stacked controls, bounds, and empty values. | `npx shadcn@latest add https://uniquel.io/r/react-number-input.json` |
| drawer | registry:component | Flexible Base UI drawer primitive for focused tasks, panels, and mobile sheets. | `npx shadcn@latest add https://uniquel.io/r/drawer.json` |
| modal | registry:component | Flexible Base UI modal primitive for confirmations, forms, sharing, and command dialogs. | `npx shadcn@latest add https://uniquel.io/r/modal.json` |
| tabs | registry:component | Base UI tabs with default, line, vertical, disabled, and icon compositions. | `npx shadcn@latest add https://uniquel.io/r/tabs.json` |

## For AI agents

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