Components

25 run live on this site with copyable source. 295 more install via CLI from registries we can fetch automatically.

Live on ShinUI

Interactive previews with the exact source file that renders them. Save components you reuse often — stored in your browser.

Move your cursor across this card

A radial gradient tracks the pointer, so the surface reads as lit rather than merely hovered.

Spotlight Card

Motion

A card that lights up under the cursor. The gradient is positioned from pointer coordinates rather than a CSS hover state, so the highlight follows the exact path of the mouse.

Dock

Mobile

macOS dock magnification. The scale falloff uses a cosine curve rather than a linear ramp, which is what makes neighbouring icons swell smoothly instead of stepping.

Animated Tabs

Transitions

A tab list with a sliding indicator measured from the active trigger's own layout box, so it stays correct when labels change length or the container resizes.

Airplane ModeWi-FiBluetooth

iOS Toggle

Mobile

The iOS switch at its real dimensions — 51×31 with a 27px thumb — using Apple's system green and the spring-like easing curve from the platform.

Marquee

Motion

An infinite scrolling row built from two duplicated tracks, with an edge mask, hover pause and a reduced-motion opt-out. No dependency and no JavaScript loop.

Pure CSS

Mesh Gradient

Gradient Mesh

Backgrounds

Four drifting blurred blobs plus an SVG grain overlay. Renders on the server, costs nothing at runtime, and gets most of the way to a WebGL mesh gradient.

Search everything

Every component and resource in one command palette.

Instant themes

Dark and light, driven by CSS variables.

Copy the source

No package to install.

Credit the maker

Every entry links back to whoever built it.

Bento Grid

Blocks

A responsive bento layout that collapses to a single column on mobile, with per-card column and row spans and a hover glow that scales from the corner.

Avatar Stack

Libraries

Overlapping avatars with an overflow counter and a lift on hover. Falls back to initials when no image is supplied.

Resources indexed

Counter Stat

Charts

A stat card whose number counts up the first time it scrolls into view, using easeOutExpo so the final digits do not crawl. Respects prefers-reduced-motion.

Glow Button

Libraries

A pill button with a sweeping specular highlight and a soft brand-coloured bloom behind it. Both effects are hidden under reduced motion.

Segmented Control

Mobile

The iOS segmented control as a CSS grid, so the thumb width is derived from the number of options and the translate is a whole multiple of it.

Generating your component…Reading the registry and resolving dependencies

Shimmer Text

AI UI

A loading-state text treatment that animates a light sweep through a background-clipped gradient. Useful for streaming AI responses.

Agent is thinking…

Thinking Orbs

AI UI

Three staggered dots for agent and AI chat loading states. Lightweight CSS keyframes with a reduced-motion opt-out.

Typing Dots

AI UI

A compact typing indicator pill — the pattern every chat UI needs, without pulling in a full messaging library.

Copy Button

Libraries

One-click clipboard copy with a checkmark confirmation. Uses the Clipboard API and resets after 1.6 seconds.

Search⌘K·Save⌘S

Kbd

Libraries

Keyboard shortcut chips with a raised border treatment. Includes a KbdGroup helper for multi-key combos like ⌘K.

Featured

Gradient border card

One pixel of brand colour around the edge, no extra wrapper divs.

Gradient Border

Backgrounds

A card wrapped in a 1px brand gradient ring using a padding-box trick — no extra DOM layers or mask hacks.

Dot pattern surface

Dot Pattern

Backgrounds

A subtle radial-dot background for empty states, hero sections and preview frames. Pure CSS, no image asset.

68%

92%

Progress Ring

Charts

An SVG circular progress indicator with animated stroke offset and an accessible progressbar role.

LiveAwayIn a callOffline

Status Badge

Libraries

Presence pill with a ping animation for online, away, busy and offline states. Hides the ping under reduced motion.

Hover to flip

ShinUI

Design resources, indexed.

Copy the source

Every component ships with the exact file that renders above it.

Flip Card

Motion

A 3D card flip on hover using preserve-3d and backface-visibility. Disabled entirely when prefers-reduced-motion is on.

Loading…

LDRS Ring

Libraries

A minimal SVG ring loader with a dashed arc sweep — the kind of spinner LDRS popularised, without pulling in the full library.

GlassCN style

Frosted card

Backdrop blur and a soft border over any colourful surface.

Glass Card

Libraries

Frosted glass surface with backdrop blur, a subtle highlight gradient and a hairline border — the glasscn look in one div.

Cookie Consent

Infra

A compact consent banner with accept and decline actions. Dismisses inline — wire it to your analytics gate when you ship it.

Aug 2026
Public launch
Ship the searchable index and live component registry.
Jul 2026
Registry grows
Add docks, loaders, glass cards and AI chat patterns.
Jun 2026
First commit
Seed the index from the original ShinUI README list.

Timeline

Blocks

A vertical timeline with a brand dot per milestone and a left rule — enough structure for changelogs, roadmaps and onboarding steps.

Installable from registries

Fetched from public indexes where available (shadcn/ui, SmoothUI). Most indexed sites are browse-only links — only registries with open catalogs appear here.

295 installable items. These are fetched from public registries — copy the install command; they do not run live on ShinUI.

Accordion

shadcn/ui

Components

Live on ShinUI

Move your cursor across this card

Spotlight Card

Dock

Animated Tabs

iOS Toggle

Marquee

Gradient Mesh

Search everything

Instant themes

Copy the source

Credit the maker

Bento Grid

Avatar Stack

Counter Stat

Glow Button

Segmented Control

Shimmer Text

Thinking Orbs

Typing Dots

Copy Button

Kbd

Gradient Border

Dot Pattern

Progress Ring

Status Badge

Flip Card

LDRS Ring

Glass Card

Cookie Consent

Timeline

Installable from registries

Accordion

Alert

Alert Dialog

Aspect Ratio

Attachment

Avatar

Badge

Breadcrumb

Bubble

Button

Button Group

Calendar

Card

Carousel

Chart

Checkbox

Collapsible

Combobox

Command

Context Menu

Dialog

Direction

Drawer

Dropdown Menu

Empty

Field

Form

Hover Card

Input

Input Group

Input Otp

Item

Kbd

Label

Marker

Menubar

Message

Message Scroller

Native Select

Navigation Menu

Pagination

Popover

Progress

Questionnaire

Radio Group

Resizable

Scroll Area