---
name: "@xcn"
slug: "xcn"
description: "Curated collection of hand-crafted, minimalist animated React components built with Tailwind CSS and Framer Motion (physics-based spring animations), distributed via the shadcn CLI (TanStack Start documentation site). Current components include Animated Cards (overlapping deck with hover scaling and per-card rotation), Animated Testimonials, Motion Button, Scroll Bars, Skeuomorphic Buttons, and Stamp. TypeScript throughout, Apache 2.0 licensed, early-stage with more components planned. Use for: projects needing a small set of highly polished, physics-animated UI accents — particularly stacked card and button effects — where minimal aesthetic and full code ownership are priorities."
category: "Animated components"
tags: ["aesthetic", "animation", "buttons", "cards", "marketing", "retro"]
framework: "react"
license: "Apache-2.0"
author: "radiumcoders"
website: "https://ui.radiumcoders.com"
github: "https://github.com/radiumcoders/ui"
registry: "https://ui.radiumcoders.com/r/index.json"
pro: false
pro_url: null
github_stars: 8
component_count: 6
generated_at: "2026-07-28T08:00:50.948Z"
---

# @xcn

Curated collection of hand-crafted, minimalist animated React components built with Tailwind CSS and Framer Motion (physics-based spring animations), distributed via the shadcn CLI (TanStack Start documentation site). Current components include Animated Cards (overlapping deck with hover scaling and per-card rotation), Animated Testimonials, Motion Button, Scroll Bars, Skeuomorphic Buttons, and Stamp. TypeScript throughout, Apache 2.0 licensed, early-stage with more components planned. Use for: projects needing a small set of highly polished, physics-animated UI accents — particularly stacked card and button effects — where minimal aesthetic and full code ownership are priorities.

## Links

- Website: https://ui.radiumcoders.com
- GitHub: https://github.com/radiumcoders/ui
- Registry JSON: https://ui.radiumcoders.com/r/index.json
- Directory page: https://sh4dcn.vercel.app/registry/xcn
- This file: https://sh4dcn.vercel.app/md/xcn.md

## Install

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

## Components (6)

| name | type | description | install |
| --- | --- | --- | --- |
| animated-cards | registry:component | Overlapping animated cards with subtle hover zoom and per-card rotation. | `npx shadcn@latest add https://ui.radiumcoders.com/r/xcn/animated-cards.json` |
| motion-btn | registry:component | A button component with a motion effect. | `npx shadcn@latest add https://ui.radiumcoders.com/r/xcn/motion-btn.json` |
| scroll-bars | registry:component | Animated scroll bars component. | `npx shadcn@latest add https://ui.radiumcoders.com/r/xcn/scroll-bars.json` |
| animated-testimonials | registry:component | Animated testimonials with blur effect. | `npx shadcn@latest add https://ui.radiumcoders.com/r/xcn/animated-testimonials.json` |
| skeuomorphic-buttons | registry:component | A set of skeuomorphic buttons with realistic shadows and press effects. | `npx shadcn@latest add https://ui.radiumcoders.com/r/xcn/skeuomorphic-buttons.json` |
| stamp | registry:component | A perforated edge stamp component with customizable colors. | `npx shadcn@latest add https://ui.radiumcoders.com/r/xcn/stamp.json` |

## For AI agents

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