Orea UI

Premium animated React components powered by Framer Motion.

Installation

npm install @oreaui/orea-ui

Orea UI has the following peer dependencies:

npm install framer-motion lucide-react clsx tailwind-merge

Install from GitHub Packages

npm install @oreaui/orea-ui --registry=https://npm.pkg.github.com

Or add an .npmrc to your project and install normally:

echo "@oreaui:registry=https://npm.pkg.github.com" > .npmrc
npm install @oreaui/orea-ui

Usage

import { TiltCard, SearchGlow, ConfettiButton } from '@oreaui/orea-ui'

export default function Page() {
  return (
    <div>
      <ConfettiButton onClick={() => alert('🎉')}>Click me</ConfettiButton>
    </div>
  )
}

Copy-paste workflow

Prefer to own the source code? Use the CLI to copy any component into your project:

npx @oreaui/cli add tilt-card
npx @oreaui/cli add confetti-button

This copies the raw .tsx source into components/orea-ui/ where you can edit freely.

List available components

npx @oreaui/cli add

Components

• AccordionDemo, AnimatedModal, AuroraBackground, AvatarGroup
• BarChartGrow, BorderBeam, Carousel, CheckboxDraw
• CommandPalette, ConfettiButton, CopyField, Dock
• DropdownMorph, GradientText, HeroReveal, LearnMore
• LikeButton, MagneticButton, Marquee, MockChat
• NotificationBell, NumberTicker, OtpInput, ProgressRing
• SearchGlow, SegmentedControl, ShimmerText, SkeletonReveal
• SpinningCounter, SpotlightCard, StarRating, TabsSlide
• TextReveal, ThemeToggle, TiltCard, ToastStack
• ToggleBounce, TooltipDemo, Typewriter

Styling

Orea UI components use Tailwind CSS classes. Make sure Tailwind is configured in your project.

License

MIT