50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T2963,'use client'; import { Check, CircleCheck, ExternalLink } from 'lucide-react'; import { useState } from 'react'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { Card, CardContent } from '@/components/ui/card'; import { Field, FieldDescription, FieldLabel } from '@/components/ui/field'; import { Input } from '@/components/ui/input'; import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@/components/ui/select'; import { Separator } from '@/components/ui/separator'; import { cn } from '@/lib/utils'; const highlights = [ { id: 1, feature: 'Used by top design teams worldwide', }, { id: 2, feature: 'Seamless integration with design tools', }, { id: 3, feature: 'Real-time collaboration features', }, ]; const plans = [ { name: 'Creator', features: [ { feature: 'Up to 3 design projects' }, { feature: 'Basic collaboration tools' }, { feature: '5GB cloud storage' }, { feature: 'Community forum support' }, ], price: '$15', href: '#', isRecommended: false, }, { name: 'Team', features: [ { feature: 'Unlimited design projects' }, { feature: 'Advanced collaboration suite' }, { feature: '50GB cloud storage' }, { feature: 'Priority email support' }, ], price: '$49', href: '#', isRecommended: true, }, { name: 'Agency', features: [ { feature: 'Unlimited projects and team members' }, { feature: 'Client portal access' }, { feature: '250GB cloud storage' }, { feature: 'White-labeling options' }, { feature: 'Dedicated account manager' }, ], price: '$99', href: '#', isRecommended: false, }, ]; export default function FormLayout05() { const [selected, setSelected] = useState(plans[0]); return (

Create new design workspace

Organization

Workspace name

Region For best performance, choose a region closest to your operations

Plan type*

setSelected( plans.find((plan) => plan.name === value) || plans[0] ) } value={selected.name} > {plans.map((plan) => (

{plan.name} {plan.isRecommended && ( recommended )}

{feature.feature}

Learn more

{plan.price} /mo

))}

Choose the right plan for your design team

Our flexible plans are designed to scale with your team's needs. All plans include core design collaboration features with varying levels of storage and support.

{item.feature}

Learn more

); } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L50",null,{"namespace":"@blocks-so","registryDependencies":["badge","button","card","field","input","radio-group","select","separator"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"content/components/form-layout/form-layout-05.tsx","content":"$52","type":"registry:component","target":"components/form-layout-05.tsx"}],"className":"h-[70svh] min-h-80"}]]}]