Monocharts README

The project's README from github.com/Subhan-code/Monocharts. As one markdown file: README.md.

@subhanhq/amicro

A curated collection of premium React micro-interactions, transition components, and card layouts powered by Motion.

npm version License GitHub Stars Sponsor

╭──────────────────────── Amicro CLI ────────────────────────╮
│ npx @subhanhq/amicro@latest init     initialize project    │
│ npx @subhanhq/amicro@latest add      add UI components     │
╰────────────────────────────────────────────────────────────╯

⚡️ Quick Start

Installation

npm install @subhanhq/amicro
# or
yarn add @subhanhq/amicro
# or
pnpm add @subhanhq/amicro

CLI Command Usage

# 1. Initialize configuration in your React / Next.js / Vite project
npx @subhanhq/amicro@latest init

# 2. Add individual components directly to your codebase
npx @subhanhq/amicro@latest add download-button

# 3. Add card interaction components
npx @subhanhq/amicro@latest add card-arc-5

🎨 shadcn/ui Registry Integration

You can add Amicro motion primitives, custom hooks, and spring presets directly to your project using the shadcn CLI!

1. Direct URL Installation

You can install any component directly by referencing its public raw URL:

npx shadcn add https://raw.githubusercontent.com/Subhan-code/Amicro--Micro-transitions-/main/registry/ui/fade-in.json

Add the @amicro namespace to the registries field in your project's components.json:

{
  "registries": {
    "@amicro": "https://raw.githubusercontent.com/Subhan-code/Amicro--Micro-transitions-/main/registry/{name}.json"
  }
}

Now, you can install any component, hook, or utility directly by name:

# Install entrance transition components (placed under components/amicro/)
npx shadcn add @amicro/fade-in
npx shadcn add @amicro/fade-up
npx shadcn add @amicro/zoom-in

# Install hover & text components
npx shadcn add @amicro/tilt-card
npx shadcn add @amicro/magnetic-button
npx shadcn add @amicro/text-reveal

# Install hooks & utilities
npx shadcn add @amicro/use-scroll-progress
npx shadcn add @amicro/presets

💻 Card Components & CLI Commands

Component Description CLI Command
ARC (5 Cards) Fanned card layout forming a neat curved arc with 5 items npx @subhanhq/amicro@latest add card-arc-5
ARC (7 Cards) Expanded card arc layout accommodating 7 items cleanly npx @subhanhq/amicro@latest add card-arc-7
Long ARC (5 Cards) Wide, sweeping card arc extending translations laterally npx @subhanhq/amicro@latest add card-long-arc-5
Linear Spread Slides cards horizontally in a linear row without rotations npx @subhanhq/amicro@latest add card-linear-spread
Corner Fan Fans elements radially from a fixed bottom-left origin anchor npx @subhanhq/amicro@latest add card-corner-fan
Stamp Arc Perforated stamp cards with dynamic arc, gap, and offset controls npx @subhanhq/amicro@latest add card-stamp-arc
Cascade Stagger Deploys cards vertically and staggered in a diagonal cascade npx @subhanhq/amicro@latest add card-cascade-stagger
Scatter Desk Deal Scatters cards into an overlapping dealt hand layout on hover npx @subhanhq/amicro@latest add card-scatter-spread
Wheel Radial Fan Fans cards outward in a radial semi-circle around center anchor npx @subhanhq/amicro@latest add card-wheel-fan
Interactive Carousel An interactive arc-based 3D motion carousel featuring smooth dot indicators and dynamic prev/next controls, inspired by vivi npx @subhanhq/amicro@latest add card-carousel
CoverFlow Carousel Premium 3D CoverFlow carousel displaying cards along perspective path npx @subhanhq/amicro@latest add card-cover-flow
Time Machine Stack Apple-style perspective depth card stack with timeline scrubber npx @subhanhq/amicro@latest add card-time-machine

✨ Key Features

🛠️ Prerequisites & Requirements

👤 Author & Support

Created with ❤️ by Syed Subhan

RepoStars

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

Monocharts (Subhan-code/Monocharts)

shadcn
Searching Database…

189 ·GitHub
Monocharts
What is this?It is a curated collection of premium React micro-interaction components, transition effects, and animated card layouts (named @subhanhq/amicro), built on top of the Motion animation library.
Is this an npm package I import, or something else?It is a copy-to-code component registry, like shadcn/ui: you install a CLI command that copies the raw TSX source of a component into your own project instead of adding a runtime dependency.
How do I add a component to my project?Run a CLI command like `npx @subhanhq/amicro@latest add card-arc-5`, or set up namespaced registry mapping by adding the @amicro namespace to your project's components.json so you can install by name.
What do I need already set up in my project to use these components?Node.js 18 or higher, React 18 or 19, Tailwind CSS v3 or v4, and either the motion or framer-motion package.
Does it work if I'm not using Tailwind or Motion?No, the components assume Tailwind CSS and the Motion animation library are already configured in your project since they are listed as hard prerequisites.
Is this meant for web apps specifically?Yes, it's a React UI component library intended for web frontends, not for native mobile or desktop apps.
What kind of components does it include?Mostly card layouts (arc fans, cascades, carousels, time-machine stacks) and micro-transitions, such as a 5-card arc, a CoverFlow carousel, and an Apple-style perspective card stack.
Why copy-to-code instead of a normal npm import?Copying the TSX source directly into your codebase avoids adding runtime dependencies and gives you full control to customize the component after installation.
Does it support dark mode?Yes, components are designed with both dark and light UI palettes in mind out of the box.
Can I install a single component without the CLI?Yes, you can also install any component directly by referencing its public raw URL instead of using the npx CLI command.
What are similar projects?arc-library, rare-ui, magicui, ink-kit, awesome-shadcn-ui, chakra-ui, canvas-ui, ui
Which topics is it in?shadcn, react-components, shadcn-ui, ui-library, design-system, tailwindcss, vite, component-library, design, ui-components, animation, ui
Creator
Subhan-code
Size
1.5 MB
Stars
189
Updated
CommitAug 15
Age
2mo
Commits · 90 Days