apps/docs/content/guides/getting-started.mdx
})}
</div> </div> </div><$Show if="docs:framework_quickstarts">
<div className="grid lg:grid-cols-12 gap-6 not-prose"> {[ { title: 'React', href: '/guides/getting-started/quickstarts/reactjs', description: 'Learn how to create a Supabase project, add some sample data to your database, and query the data from a React app.', icon: '/docs/img/icons/react-icon', enabled: isFeatureEnabled('docs:framework_quickstarts'), }, { title: 'Next.js', href: '/guides/getting-started/quickstarts/nextjs', description: 'Learn how to create a Supabase project, add some sample data to your database, and query the data from a Next.js app.', icon: '/docs/img/icons/nextjs-icon', hasLightIcon: true, enabled: isFeatureEnabled('docs:framework_quickstarts'), }, { title: 'Nuxt', href: '/guides/getting-started/quickstarts/nuxtjs', description: 'Learn how to create a Supabase project, add some sample data to your database, and query the data from a Nuxt app.', icon: '/docs/img/icons/nuxt-icon', enabled: isFeatureEnabled('docs:framework_quickstarts'), }, { title: 'Hono', href: '/guides/getting-started/quickstarts/hono', description: 'Learn how to create a Supabase project, add some sample data to your database, secure it with auth, and query the data from a Hono app.', icon: '/docs/img/icons/hono-icon', enabled: isFeatureEnabled('docs:framework_quickstarts'), }, { title: 'RedwoodJS', href: '/guides/getting-started/quickstarts/redwoodjs', description: 'Learn how to create a Supabase project, add some sample data to your database using Prisma migration and seeds, and query the data from a RedwoodJS app.', icon: '/docs/img/icons/redwood-icon', enabled: isFeatureEnabled('docs:framework_quickstarts'), }, { title: 'Flutter', href: '/guides/getting-started/quickstarts/flutter', description: 'Learn how to create a Supabase project, add some sample data to your database, and query the data from a Flutter app.', icon: '/docs/img/icons/flutter-icon', enabled: isFeatureEnabled('sdk:dart'), }, { title: 'iOS SwiftUI', href: '/guides/getting-started/quickstarts/ios-swiftui', description: 'Learn how to create a Supabase project, add some sample data to your database, and query the data from an iOS app.', icon: '/docs/img/icons/swift-icon', enabled: isFeatureEnabled('sdk:swift'), }, { title: 'Android Kotlin', href: '/guides/getting-started/quickstarts/kotlin', description: 'Learn how to create a Supabase project, add some sample data to your database, and query the data from an Android Kotlin app.', icon: '/docs/img/icons/kotlin-icon', enabled: isFeatureEnabled('sdk:kotlin'), }, { title: 'SvelteKit', href: '/guides/getting-started/quickstarts/sveltekit', description: 'Learn how to create a Supabase project, add some sample data to your database, and query the data from a SvelteKit app.', icon: '/docs/img/icons/svelte-icon', enabled: isFeatureEnabled('docs:framework_quickstarts'), }, { title: 'SolidJS', href: '/guides/getting-started/quickstarts/solidjs', description: 'Learn how to create a Supabase project, add some sample data to your database, and query the data from a SolidJS app.', icon: '/docs/img/icons/solidjs-icon', enabled: isFeatureEnabled('docs:framework_quickstarts'), }, { title: 'Vue', href: '/guides/getting-started/quickstarts/vue', description: 'Learn how to create a Supabase project, add some sample data to your database, and query the data from a Vue app.', icon: '/docs/img/icons/vuejs-icon', enabled: isFeatureEnabled('docs:framework_quickstarts'), }, { title: 'TanStack Start', href: '/guides/getting-started/quickstarts/tanstack', description: 'Learn how to create a Supabase project, add some sample data to your database, and query the data from a TanStack Start app.', icon: '/docs/img/icons/tanstack-icon', hasLightIcon: true, enabled: isFeatureEnabled('docs:framework_quickstarts'), }, { title: 'Refine', href: '/guides/getting-started/quickstarts/refine', description: 'Learn how to create a Supabase project, add some sample data to your database, and query the data from a Refine app.', icon: '/docs/img/icons/refine-icon', enabled: isFeatureEnabled('docs:framework_quickstarts'), }, ] .filter((item) => item.enabled !== false) .map((item) => { return ( <Link href={`${item.href}`} key={item.title} passHref className={'col-span-4'}> <GlassPanel title={item.title} span="col-span-6" background={false} icon={item.icon} hasLightIcon={item.hasLightIcon} > {item.description} </GlassPanel> </Link> ) })} </div></$Show>
<$Show if="!quickstarts:hide_nimbus">
<$Partial path="quickstart_nimbus.mdx" />
</$Show>
<$Show if="docs:web_apps">
})}
</div> </$Show><$Show if="docs:mobile_tutorials">
})}
</div> </$Show>