Docs · Getting started

Using components

Copy a component into your app and give it what it needs.

Components aren't an npm package. You copy each one into your app and own the code, so you can change anything. Each is one file in src/components/ui/.

Copy a component

Find it
Browse a category in the sidebar or press ⌘K to search. Each demo lists its motion and the import line to use.
Open the code
Switch the demo from Preview to Code and copy the file. Save it under the same name, for example src/components/ui/button.tsx.

Bring its imports

Look at the imports at the top. Install any package you don't have yet, and copy any @/… or ./… file it uses:

What imports tell you

"use client"; import { AnimatePresence, motion } from "motion/react";   // installed packageimport { cn } from "@/lib/cn";                            // shared helperimport { transition } from "@/lib/motion";                // shared helperimport { useDismiss } from "@/hooks/use-dismiss";         // shared hookimport { Icon } from "./icon";                            // another component

Use it

src/components/record-payment.tsx

import { Wallet01Icon } from "@hugeicons/core-free-icons";import { Button } from "@/components/ui/button";import { useToast } from "@/components/ui/toast"; export function RecordPayment() {  const toast = useToast();  return (    <Button      leadingIcon={Wallet01Icon}      onClick={() => toast({ title: "Payment recorded" })}    >      Record payment    </Button>  );}

Shared files

Every component depends on a few of these. The Installation guide sets up the first three.

File	Needed by
`src/lib/cn.ts`	Every component (joins class names)
`src/lib/motion.ts`	Anything animated (durations, easings, springs)
`src/components/ui/icon.tsx`	Anything with an icon
`src/hooks/use-dismiss.ts`	Menus, popovers, selects, pickers (Escape and outside click)
`src/hooks/use-focus-trap.ts`	Dialogs, drawers, sheets (keeps Tab inside)
`src/hooks/use-lock-scroll.ts`	Dialogs, drawers, sheets (stops the page scrolling)
`src/hooks/use-reset-on-hide.ts`	Anything that opens (closes it when its page is hidden)
`src/lib/format.ts`	Prices and numbers in ₹

Providers

A few components need a provider near the root of your app. They are all in src/app/providers.tsx from the Installation guide.

ToastProvider for useToast().
ThemeProvider for ThemeToggle and useTheme().
CustomThemeProvider for ThemeCustomizer; see Theming.
MotionConfig reducedMotion="user" so animations respect the reduced-motion setting.

Rules that keep them working

Style with the Arise UI utilities (bg-primary, text-fg-muted, rounded-md). Hex colors and dark: color variants would break theming.
Add "use client" only to files that use hooks, motion or browser APIs.
Don't call Date.now(), new Date() or Math.random() while rendering; do it in effects or event handlers. See Next.js.