.theme-image {
  border-radius: 12px;
  border: 2px solid rgba(138, 138, 138, 0.2);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  max-width: 100%;
  height: auto;
}

/* Visibility logic */
.light-image {
  display: block;
}

.dark-image {
  display: none;
}

html.dark .light-image {
  display: none;
}

html.dark .dark-image {
  display: block;
}

.grid-container-showcase {
  display: grid;
  grid-template-columns: 1fr; /* Mobile: one column */
  gap: 24px;
  padding: 5px;
  max-width: 1000px;
  margin: auto;
}

@media (min-width: 640px) {
  .grid-container-showcase {
    grid-template-columns: repeat(2, 1fr); /* Tablet and up: two columns */
    align-items: stretch; /* Ensure equal-height cards */
  }
}

.card-showcase-link {
  text-decoration: none;
  display: block;
  outline: none;
  border: none;
  height: 100%;
}

.card-showcase-link:focus {
  outline: none;
}

.card-showcase-link img {
  pointer-events: none; /* Prevent default click/zoom behavior */
}

.card-showcase {
  background: #fff;
  border-radius: 12px;
  border: 2px solid rgba(138, 138, 138, 0.2);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%; /* Ensure card fills link height */
  padding: 0;
  margin: 0;
  transition: background 0.3s ease, border 0.3s ease, box-shadow 0.3s ease;
}

.dark .card-showcase {
  background: #1e1e1e;
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.05);
}

.image-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
  margin: 0;
  padding: 0;
  line-height: 0;
}

.image-wrapper img {
  width: 100%;
  display: block;
  margin: 0;
  border-radius: 12px 12px 0 0;
  transition: transform 0.3s ease;
}

/* Image zoom on card hover */
.card-showcase-link:hover .image-wrapper img {
  transform: scale(1.02);
}

.card-showcase-content {
  padding: 16px;
  transition: color 0.3s ease;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.card-showcase-content h3 {
  margin: 0 0 8px;
  font-size: 1.1rem;
  color: #000;
  transition: color 0.3s ease;
}

.card-showcase-content p {
  margin: 0;
  font-size: 0.95rem;
  color: #555;
  transition: color 0.3s ease;
  flex-grow: 1;
  font-weight: 400;
}

.dark .card-showcase-content h3 {
  color: #f0f0f0;
}

.dark .card-showcase-content p {
  color: #bbb;
}

Before you begin

Preview panel features at a glance

See your app in action as you build

Preview your app on desktop or tablet, test responsive views, and make live visual edits - all directly inside Rocket.

Web preview

Documentation | Rocket.new

Describe your app idea, or drop a Figma link - Rocket helps you build and ship real, production-ready apps fast.

Introduction

Launch your own Rocket account in minutes - no tech jargon, no hassle.

Create an account

Turn your ideas or designs into working apps in minutes - no code, no delay.

Start a new project

Share the right Figma link so Rocket can import your design - frame or full file.

Get your Figma URL

Convert Figma designs into deployable React, HTML, or Next.js web applications using Rocket.

Create a web application

Convert Figma designs into deployable Flutter mobile applications using Rocket.

Create a mobile application

Structure your Figma files the right way so Rocket can import your screens smoothly.

Figma design guidelines

Quickly access, search, and reopen your existing Rocket projects.

Explore your projects

Manage profile settings

Here's everything you need to know about how our pricing works and which plan fits your needs.

Pricing plans

Take full control of your Rocket experience. Buy a plan, refuel, update payment methods, cancel, or download invoices with ease.

Manage your subscription

Build smarter and faster with Rocket - this guide helps you prompt better, debug confidently, and ship production-ready apps without surprises.

Best practices

From first message to full app - all in chat. Rocket generates, edits, and evolves your project in a continuous, interactive thread.

Use chat interface

Easily connect third-party services like Figma, GitHub, Stripe, and AI providers to enhance your Rocket apps.

Integrations

Peek under the hood and take full control of your Rocket app – explore, edit, and expand your project in the code-view.

Use code-view

Preview your app on real devices like iPhone and Pixel, test flows, and make visual changes instantly - right inside Rocket.

Mobile preview

Use Visual Edit and natural language to update one or more elements directly in the preview panel.

Visual edit

Stay organized with ease. View, rename, delete, or integrate with third-party tools—straight from your project settings.

Manage project settings

Use Rocket to deploy your app to the web in one click - no setup required.

Publish your web app

Step-by-step guide to launch your Flutter app to the Google Play Store.

Android app (Play Store)

Step-by-step guide to launch your Flutter app to the Apple App Store.

iOS app (App Store)

Seamlessly link your Figma account to Rocket and start turning your designs into powerful, production-ready apps.

Figma: Turn designs to code

Link your Netlify account to Rocket to deploy your apps in just a few clicks.

Netlify: Deploy in one click

Link your Supabase project to Rocket to build and deploy full-stack apps fast.

Supabase: Instant backend

Securely link your GitHub account to Rocket so you can sync and manage your app code without leaving the editor.

GitHub: Sync your code

Connect your Resend account to Rocket to start sending transactional emails instantly and securely.

Resend: Email in seconds

Connect your Stripe account to Rocket to start accepting payments securely and seamlessly in your app.

Stripe: Accept payments

Connect Google Analytics to Rocket to understand how users interact with your app.

Google Analytics: Track usage

Connect AdSense to your Rocket project and start earning by displaying ads in your app.

AdSense: Earn with ads

Connect Perplexity to your Rocket project to power natural language search and instant answers in your app.

Perplexity: Smart AI search

Connect Anthropic to your Rocket project and power AI experiences with Claude—safe, aligned, and fast.

Anthropic: Use Claude AI

Connect Gemini to your Rocket project and build with Google’s powerful multimodal AI models.

Gemini: Use Google AI

Connect OpenAI to your Rocket project and bring GPT-powered features like chat, summarization, and generation to your app.

OpenAI: Use GPT models

Prompting is how you guide Rocket’s AI using natural language. Learn how it works and why it’s the fastest way to bring your ideas to life.

Get started with prompting

A unified guide to writing clear, adaptable prompts and choosing the right prompting approach for every task in Rocket.

Apply prompting strategies

A collection of flexible, high-impact prompt examples for building, designing, connecting, and debugging inside Rocket.

Explore prompt library

Use prompts to debug apps like a builder - identify bugs, prevent breakage, and fix with clarity.

Troubleshoot with prompts

From bold ideas to real, working apps - explore what’s possible with Rocket.

Idea showcase

Everything you need to know about using Rocket - from prompting and publishing to integrations, pricing, and debugging.

FAQs

Track every update to Rocket - from bug fixes and visual editing upgrades to new template systems and framework-level improvements. All changes, every week.

Get Started

App Studio

Integrations

Prompt Engineering

Inspiration & Help

Web preview

Before you begin

See your app in action as you build

Preview panel features at a glance

You did it!

Get Started

App Studio

Integrations

Prompt Engineering

Inspiration & Help

​Before you begin

​See your app in action as you build

​Preview panel features at a glance

You did it!

Before you begin

See your app in action as you build

Preview panel features at a glance