How to use

From preview to production in four steps

Orea is copy-paste first. There's no CLI to learn and no lock-in. Here's the whole workflow.

1. Browse the library

Explore the component grid on the home page. Each card shows a live, interactive preview of the component.

2. Preview and inspect

Hover and interact with any component to see how it behaves, then open the code view to read the full source.

3. Copy the code

Hit the copy button to grab the component's source, then paste it into your project as a new file.

4. Install and ship

Make sure the peer dependencies are installed, drop the component into your page, and you're done.

Install the peer dependencies

Most Orea components rely on Framer Motion for animation and Lucide for icons. Install them once:

npm install framer-motion lucide-react

Use a component

After pasting a component into your project, import it and render it like any other React component:

import { SearchGlow } from "@/components/search-glow"

export default function Page() {
  return (
    <div className="flex min-h-screen items-center justify-center">
      <SearchGlow />
    </div>
  )
}

Ready to build?

Jump into the library and grab your first component.

Browse components