Origami Pricing, animated React component

A pricing card folded like a paper map. Tap it and it opens in two folds: the features panel swings out, then the quote and call-to-action drop down, with creases darkening mid-turn.

Pro
Pricing Sections
3D
Spring

Play with it

Move the controls and watch it change. Copy code gives you a snippet with only the props you changed.

Two folds: out, then down.

Props

Prop	Type	Default	What it does
planName	string	"Nexus Pro"	Plan name on the cover; its first letter becomes the logo tile.
price	string	"$9"	Price on the cover, including the currency symbol.
period	string	"/mo"	Small unit after the price.
features	string[]	["All components", "All templates", "Source + Figma", "Requests first"]	Lines in the features panel.
quote	string	"Paid for itself in the first week."	Customer quote on the lower-left panel.
author	string	"Maya, Loop"	Who said it.
ctaLabel	string	"Start free trial"	Label of the button on the last panel.
note	string	"14 days · cancel anytime"	Small line under the button.
onCtaClick	() => void	—	Called when the button is pressed. The card never navigates or takes payment on its own.
caption	string	"Two folds: out, then down."	Line under the card; pass an empty string to hide it.
autoplay	boolean	false	Folds and unfolds by itself until someone taps the card. Skipped when the visitor prefers reduced motion.

Add it to your project

Prepare your project

You need Tailwind CSS and the @/import alias. If shadcn isn't set up yet, initialise it once:

npx shadcn@latest init

Then add the Nexus registry to your components.json (the registries key is the part that matters):

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "css": "src/app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "registries": {
    "@nexus-labs": "https://www.nexus-ui.com/api/registry/{name}"
  }
}

2
Add the component
Run this from your project root. It adds the component, the utilities it uses and its packages.
```
npx shadcn@latest add @nexus-labs/origami-pricing
```
3
Check what was added
With the standard aliases, these files land in your project:
components/
origami-pricing/
index.ts
origami-pricing.tsx
4
Copying by hand? Install the packages
Skip this if you used the command above.
```
npm install framer-motion
```

Use it in a page

Import it and render it. The Code tab above has the full example.

// app/page.tsx
import { OrigamiPricing } from "@/components/origami-pricing";

export default function Page() {
  return (
    <main>
      <OrigamiPricing />
    </main>
  );
}

Origami Pricing, animated React component

Play with it

Props

More pricing sections