# Docs


- **Getting started**
- [Introduction](/docs): Animated React components you copy into your app, and the small engine that morphs them.
- [Installation](/docs/installation): Install any component with the shadcn CLI, or add the engine as a package.
- [Quick start](/docs/quick-start): Animate a list that sorts and filters, in a few lines.
- [shadcn registry](/docs/registry): Copy any example into your project with one command, source and CSS included.

- **Components**
- [Browse all](/docs/components)

- **Interface**
- [Share link](/docs/components/share-link): A Share pill with the faces of everyone who can already open the file. It opens into the link, who it lets in and a Copy button; copying says so, then folds back into the pill. Built on Base UI's Button, Toggle Group and Tooltip.
- [Adopt your signature](/docs/components/signature): Draw your signature or type your name: switching between them flows the ink you drew into a script and back, stroke by stroke.
- [API keys](/docs/components/api-keys): Creating an API key in one card that springs between its list, a name form and the secret: the secret decodes once in a dark panel, then travels into the newest row and scrambles into its masked form. Revoke turns into Confirm in its row.
- [Booking steps](/docs/components/booking-steps): Booking a hospital appointment, where every choice becomes part of the booking. The option you pick fills in and flies up into the summary; tap it there to change it and it flies back down.
- [Bulk selection](/docs/components/bulk-select): Selecting many rows at once: shift-click selects a range, neighbouring picks join into one band, and the hint at the foot gives way to an action bar whose count rolls as the selection grows.
- [Command palette](/docs/components/command-palette): A command palette that grows out of its search pill, keeps results in place as you type, turns a scope into a chip in the field, and folds back into a pill that says what you did.
- [Comment thread](/docs/components/comment-thread): A post and the conversation under it: typing that grows into the reply, lines that light the path to it, and replies that fold away and come back.
- [Course outline](/docs/components/course-outline): Modules and lessons joined by lines that stay attached while modules open, lessons get ticked off and finished work drops away.
- [Currency converter](/docs/components/currency-converter): A converter at today's real exchange rates: type what you send and what they get rolls with it, tap a currency and the whole card springs into a searchable list, and Send says what it did.
- [Filter bar](/docs/components/filter-bar): Filtering card transactions, the way banking and spending apps do it: picking a filter adds a segmented token to the bar, and the transactions, the count and the total spent move to match.
- [Popover menu](/docs/components/popover-menu): A compact photo-actions menu that grows out of its trigger, with Base UI handling all of the popover behavior.
- [Invite teammates](/docs/components/invite-team): A team's members panel, where one person takes four forms: an email, a chip, a pending invite and a member. Motion keeps each person continuous as they travel into the next.
- [Kitchen ticket](/docs/components/kitchen-ticket): A counter ticket whose ring fills as the order cooks, from received to picked up, and whose check and cross reshape into each other.
- [Label picker](/docs/components/label-picker): Labelling an issue: picking a label drops it onto the issue as a chip while the others make room, and typing a name that doesn't exist yet offers to create it.
- [Morphing dialog](/docs/components/morphing-dialog): A dialog that grows out of the button that opens it, and shrinks into the thing it creates. Cancel and it goes back into the button; plan a trip and it lands as the new row in your list of trips.
- [Logo morph](/docs/components/logo-morph): A name that turns into its logo and back again. The letters flow into the mark instead of fading, in either direction, and you can turn it round halfway.
- [Mentions](/docs/components/editor-mentions): Mentioning people in a comment, the way collaborative editors do it: type @ and a picker opens at the caret, and the person you pick flies out of the list into the sentence as a chip.
- [Event RSVP](/docs/components/event-rsvp): An RSVP button that grows into a sheet for your answer, saves with a progress bar, and becomes your spot, all in one tray. Built almost entirely from Base UI parts.
- [Expanding search](/docs/components/expanding-search): A search that takes over its screen, the way it does in the apps you use every day: the greeting folds away, the field rises to the top with Cancel beside it, and the shop gives way to results.
- [Feedback prompt](/docs/components/feedback-prompt): A "Was this helpful?" pill that opens in place. Your thumb flies into the corner as the pill grows into a small card with quick reasons and room to say more, then the card draws back into a thank-you.
- [Onboarding checklist](/docs/components/onboarding-checklist): The getting-started checklist a new account sees first: tick a step and the next one opens, and finishing the last folds the whole card into a small "All set" pill.
- [One-time code](/docs/components/otp-input): A sign-in card where code cells fold into verifying, error and verified states.
- [Table booking](/docs/components/table-booking): A restaurant booking that fell through offers two other times; the one you pick grows into the updated booking, and its party size opens a compact picker. Built on Base UI's Button, Toggle Group and Tooltip.
- [Music player](/docs/components/podcast-player): A mini now-playing bar that opens into the full player: the artwork grows from a thumbnail into the cover, the title, artist and play button settle into place, and sound waves move while it plays.
- [Product tour](/docs/components/product-tour): A product tour where the spotlight springs from one control to the next, a line ties each tip to what it explains, and the tip grows out of the help button and folds back into it.
- [Project setup](/docs/components/project-setup): A setup checklist beside a picture of the project it sets up. Every piece starts as a ghost; finish a step and its piece drops into place.
- [Revenue](/docs/components/revenue-card): The revenue card at the top of every SaaS dashboard: switch the range and the chart line reshapes instead of redrawing, while the MRR and the change badge roll to their new figures.
- [Seat calculator](/docs/components/seat-calculator): Pricing by team size, the calculator on a SaaS pricing page: drag the slider and faces join your team, the price rolls, the plan steps up at each tier, and yearly billing shows what you save.
- [Send a message](/docs/components/send-message): Sending a chat message: the mic turns into a send arrow as you type, your message rises into the thread, the read receipt slides down to it and their reply takes the typing bubble's place.
- [Send money](/docs/components/send-money): Sending money from a keypad, the way mobile-money and wallet apps do it: digits roll in, the commas make room, an amount over your balance is refused with a shake, and Send becomes a spinner and then a check.
- [Streak](/docs/components/streak): The celebration learning apps show when you finish today's lesson: a grey ember grows into a full flame, sparks burst out, the day count rolls up and today's dot fills in.
- [Task list](/docs/components/task-list): Issues grouped by status, with Done folded. A completed issue's ID travels into the folded row, and opening Done spreads them back out into rows.
- [Two-factor setup](/docs/components/two-factor): A setting that opens a QR code and code field in place, moves the rows below out of the way, and folds back to one line once it's on.
- [Usage meter](/docs/components/usage-meter): A plan's usage on a billing page: bars fill as the month goes on, turn amber when you're running low and red once you're over, and upgrading makes every bar spring back down.
- [Wallet](/docs/components/wallet-stack): A leather card holder with three cards in it: tap it and the cards slide up and fan out, choose one and it rises to the top while its latest transactions fill in underneath, as Apple Wallet does.

- **Form elements**
- [Amount input](/docs/components/amount-input): An amount field where the digits you type rise into place and the separators slide to make room. Refused input gets a small shake, and going over your balance turns the field red while the line under it morphs to say by how much.
- [Phone input](/docs/components/phone-input): A phone number field that formats as you type: each digit rises into place, the country's spaces and brackets appear as the number reaches them, and changing country regroups the same digits with the separators sliding to their new places.
- [Tag input](/docs/components/tag-input): A tag field where the words you type become the tags: press comma or Enter and the chip forms around the text right where you typed it, with existing tags suggested as you go.
- [Quantity stepper](/docs/components/quantity-stepper): An add-to-cart button that becomes a quantity stepper: the count rolls up and down, and at one the minus becomes a bin, so the next press folds it back into Add.
- [Stepper slider](/docs/components/stepper-slider): A number control that's a stepper for small nudges and a slider for big changes. Press − or + to move a step at a time, or drag the number sideways and the stepper stretches into a slider, then folds back when you let go.
- [Promo code](/docs/components/promo-code): A promo code field on a cinema ticket: apply a code and the field springs down into a green ticket chip with the code and what it's worth, while the discount line opens and the total rolls down. A code that doesn't work shakes the field and says why.
- [Range slider](/docs/components/range-slider): A price range slider with a histogram behind it: while you drag a handle its price lifts out of the label and rides above the handle, then flies back when you let go.
- [Split amount](/docs/components/split-amount): Splitting a bill: tap someone at the table and their face flies into the split, the bar re-divides and every share rolls to the new amount, cents and all. Pick a tip, then request what you're owed. Built on Base UI's Button and Toggle Group.

- **Illustrations**
- [Order tracker](/docs/components/order-tracker): A food order told like a short film: each stage plays live (the lid lifts off the steaming pot, the bag hops, the scooter's wheels spin down the road, the front door opens), then the drawing reshapes into the next stage and that one comes alive.
- [Payment status](/docs/components/payment-status): A payment's status as one drawing: the card becomes a lock while the bank confirms, then a receipt when it's paid, or the card again with a warning when it's declined.

- **Particles**
- [Inbox triage](/docs/components/inbox-triage): An inbox where archived and deleted mail breaks into dust and pours into its tab, with multi-select, swipe, hover actions and an undo toast.
- [Donation goal](/docs/components/donation-goal): A fundraising goal told in dots: every donation flies in as particles and fills the picture of what it pays for, until the water gathers into a heart.
- [Focus timer](/docs/components/focus-timer): A Pomodoro timer drawn as an hourglass of real sand: it pours while you work, freezes when you pause, and flips over for your break.
- [Unit chart](/docs/components/unit-chart): A chart where every dot is 25 customers: regroup by plan, region or channel and the same dots move to their new column.
- [Particle shapes](/docs/components/particle-shapes): Thousands of dots turning in 3D that flow from a spiral galaxy into a double helix, then into the Lorenz attractor's two wings, a honeybee, a butterfly and the Remold mark.
- [Voice assistant](/docs/components/voice-assistant): A voice assistant's orb of 3D dots that breathes while idle, ripples with your voice as it listens, swirls into a ring as it thinks, and pulses as it speaks.

- **Canvas**
- [Voice orb](/docs/components/voice-orb): A soft sphere of drifting cloud for voice interfaces: it breathes when idle, swells with your voice, gathers while thinking and flows while speaking. The demo is live translation, and the translated line morphs as it revises itself.

- **Building blocks**
- [Overview](/docs/primitives): The parts every Remold component is built from. Each one is live here; open it for its code, examples and full API.
- [Morph](/docs/primitives/morph): Morphs everything inside it whenever its trigger changes.
- [Text](/docs/primitives/text): Text that changes letter by letter: shared letters slide, the rest fade.
- [Icon](/docs/primitives/icon): An icon that reshapes into the next one. Pass any icon component, from Lucide, Heroicons or your own SVGs.
- [PathGroup](/docs/primitives/path-group): A multi-part SVG illustration whose parts each morph on their own, and stay together as one picture.
- [Scene](/docs/primitives/scene): A canvas scene of objects that springs between layouts.
- [Story](/docs/primitives/story): A Scene told as chapters, each revealing a layout with an annotation.
- [Particles](/docs/primitives/particles): Morph a word, shape or image into another as dots: each dot is matched to its nearest place in the next one.
- [Canvas](/docs/primitives/canvas): Paint your own canvas and leave the plumbing to Remold: sharp at every size, a frame loop that runs only while something moves and only on screen, numbers that spring to new targets, and reduced motion.
- [Globe](/docs/primitives/globe): A dotted Earth that turns on its own, spins under a finger, pulses where things happen and flies arcs between places. Pass events in and pick colours; the projection, the land, the frame loop and the dragging are done.
- [Dot grid](/docs/primitives/dot-grid): A dotted background that wakes up under the cursor. Dots swell and lean away from the pointer, a click sends a ripple, and your wordmark or logo can light up in the dots.
- [Connectors](/docs/primitives/connectors): Lines between elements that stay attached while the elements move.
- [Ignore](/docs/primitives/ignore): Leaves its contents out of transitions.

- **Hooks**
- [useRemold](/docs/hooks/use-remold): Animate a state change you make from an event handler.
- [useViewTransition](/docs/hooks/use-view-transition): Run a change through the browser's View Transitions API, with Remold pairing the elements.
- [useAutoplay](/docs/hooks/use-autoplay): Step through states by itself while on screen, and stop when someone takes over: for landing-page demos.
- [useSpringPress](/docs/hooks/use-spring-press): A small, interruptible spring response for controls pressed with a pointer.
- [useDragToDismiss](/docs/hooks/use-drag-to-dismiss): Let a sheet, card or panel be pulled away: it follows the finger, goes when pulled far or flicked, and otherwise springs back.
- [useDust](/docs/hooks/use-dust): Break parts of the page into dots that pour somewhere else: a row into a bin, a product into a cart, and back again.

- **Guides**
- [How matching works](/docs/concepts/matching): How Remold decides which element became which, and how to steer it.
- [Springs](/docs/concepts/springs): Everything moves on springs, described by how long they take and how much they bounce.
- [Accessibility](/docs/concepts/accessibility): What Remold does for people using reduced motion, screen readers and keyboards.
- [Styling](/docs/concepts/styling): Every part renders plain elements you can style, and exposes its state as data attributes.

- **Low-level APIs**
- [scene()](/docs/canvas/scene): A canvas scene of objects that springs between named layouts. No framework needed.
- [particles()](/docs/canvas/particles): Thousands of dots that rebuild themselves into each new shape.
- [painter()](/docs/canvas/painter): A canvas you paint yourself, with sizing, the frame loop, springs and reduced motion handled.
- [Motion values](/docs/core/motion): Springs you drive yourself, one number or thousands at once.
- [Matching](/docs/core/matching): The pairing functions everything else uses, available on their own.
- [Shapes](/docs/core/shapes): Match and interpolate SVG paths without choosing an animation runtime.