Code generated by Rapidpages depends on a few libraries. These libraries are:

If you are unfamiliar with these libraries, we recommend you to first become familiar with them before using the code generated by Rapidpages.

​
Using the Code

The code generated by Rapidpages is a React component that can be used in any React project.

To use a component in your project, copy the code from the Code tab and paste it into a new file.

/**
  * Generated by Rapidpages
  */
import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { CreditCardIcon, LockOpenIcon, ShoppingCartIcon } from "lucide-react"

export default function Component() {
  return (
    <div className="p-6 space-y-6">
      <header className="text-3xl font-bold">Billing</header>
      
      <section>
        <Card className="w-full max-w-md mx-auto">
          <CardHeader>
            <CardTitle>Payment Method</CardTitle>
            <CardDescription>Update your payment information</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="grid gap-4">
...

The first few lines in your generated code are other components that your newly generated component depend on. You can install the shadcn components using the installer (eg for cards):

npx shadcn-ui@latest add card

For lucide icons, a simple npm install is enough:

npm install lucide-react

For more details, you can visit the library websites.

PromptingIntroduction