# Editor Component

> Rive Editor Hero — Interactive UI Mockup of a Production-Ready Design Tool This hero section component recreates a beautiful, high-fidelity simulation of a real design editor inspired by Rive.app. It’s built using React, Tailwind CSS, Lucide Icons, and fully leverages modern component architecture with reusable UI primitives like Button and Badge.  Ideal for landing pages showcasing tools, design software, or any product that blends creativity and interactivity.  🚀 Features at a Glance: 📌 Hero Content Block  Bold headline with highlighted keyphrase  Descriptive subtext that scales across breakpoints  Prominent CTA with animated arrow transition  🛠 Fully Sketched Editor UI  Chrome-style tab bar and window controls  Layered sidebars (tools, layers, animations, properties)  Live preview canvas with stylized animation placeholder  Interactive bottom bar with timeline/state management mockup  🧱 Modular Design  Reusable <Button /> and <Badge /> components with variants and responsive sizing  Cleanly separated layout using Tailwind’s grid utilities  Supports light/dark theming with accessible color contrast  🧠 Fully Responsive  Mobile-first layout with graceful scaling for tablets and desktops  Utility-based spacing and typography for optimal readability  📦 Built with Developer Experience in Mind  use client ready for Next.js App Router  Type-safe props (e.g. for Button, Badge)  Lucide icon integration for scalable vector graphics  🧩 Use Cases: Hero section for UI/UX tools  Landing pages for animation, design, or 3D tools  Product feature showcases  Interactive design editor demos  Developer portfolio projects that simulate real SaaS UIs

- Author: [Sonu](https://21st.dev/@uniquesonu)
- License: unknown
- npm dependencies: lucide-react
- Live preview: https://21st.dev/@uniquesonu/components/editor-component

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/uniquesonu/editor-component?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt