A visual canvas for React and Next.js. Design from scratch just like Figma, import any shadcn registry component, or generate with AI. What you design is what you ship.
Free to start · No credit card required
Every path flows through the same canvas, the same property panel, and the same export pipeline. The result is always clean React + Tailwind.
Draw a frame. Build anything inside it. Ship real code.
Start with an empty canvas. Draw a frame and compose from scratch — drag in elements, stack sections, set spacing, pick colors, adjust typography. Unlike Figma, every edit writes a real Tailwind class. No export step. No translation layer. The code is ready to ship.
Imported from shadcn registry.
Paste a shadcn registry URL. It lands on your canvas, ready to edit.
Any shadcn-compatible component renders on the canvas immediately — fully editable, fully styleable, fully exportable. Your own React components work the same way. No conversion step required.
Describe what you need. The AI builds it using your design system.
Ask for a hero section, a pricing table, or a dashboard layout. The AI generates real components with your Tailwind classes and design tokens — then keep editing visually, like anything else on the canvas.
Import from any public shadcn registry. Paste a URL, Nextbunny resolves dependencies and renders it on the canvas. Fully editable, fully exportable.
Copy any public shadcn registry URL. Nextbunny fetches the component, resolves all dependencies, and renders it on the canvas. Editable. Styleable. Exportable.
Registry components often depend on sub-components, hooks, and utilities. Nextbunny resolves the entire tree automatically — rewrites imports, converts CSS variables, deduplicates files. You paste one URL. Everything just works.
Built a custom shadcn registry for your team? Paste the URL. Nextbunny supports any JSON endpoint following the shadcn spec — pages, blocks, components, hooks, styles. The same pipeline handles them all.
What renders on the canvas is what lands in your codebase. Clean TypeScript. Tailwind utilities. No proprietary runtime.
export default function Page() {
return (
<main className="min-h-screen">
<Hero />
<Pricing />
</main>
);
}
Code quality
You export a full Next.js project codebase your team can ship immediately, with clean structure and predictable classes.
TypeScript
Fully typed components
Tailwind CSS v4
Utility classes only
Semantic HTML
No wrapper divs
Zero runtime
Nothing from Nextbunny ships
Every export is plain React + Tailwind. Delete Nextbunny tomorrow — your project keeps working.
Nothing from Nextbunny ships with your code.
No inline styles. No CSS modules. Utilities only.
Every line of exported code belongs to you.
Figma gives you a beautiful canvas — but the code it exports needs a complete rewrite before it's shippable.
Framer and Webflow let you design and publish — but your work lives inside their platform. Moving to your own codebase means starting over.
AI code generators are fast — but the output doesn't know your design system or follow your patterns.
Nextbunny gives you the visual canvas without the trade-off. Design visually. Export clean React. Keep your code.
Don't see yours? support@nextbunny.co
We're opening early access in small batches. Drop your email and we'll send an invite when your spot is ready.