# Verge Kit

<div data-docs-landing class="flex items-center justify-center gap-2 text-foreground sm:justify-start sm:gap-6">
  <img
    class="block w-[clamp(3.5rem,20vw,5rem)] shrink-0 self-center sm:w-32"
    src="/vk-crane-a.svg"
    alt=""
    aria-hidden="true"
  />
  <p class="my-0 min-w-0 self-center text-[clamp(var(--text-lg),5.5vw,var(--text-2xl))] leading-[1.2] font-semibold italic sm:text-4xl">
    <span class="block sm:whitespace-nowrap">Start new apps with low</span>
    <span class="block sm:whitespace-nowrap">effort & high confidence!</span>
  </p>
</div>

```bash
npm create vergekit@latest
```

<div class="text-base/7 sm:text-2xl/normal text-neutral-600">
  <p class="mt-0 mb-4 last:mb-0 sm:mb-6 sm:text-pretty">
    <span class="pr-[0.15em] text-2xl leading-none font-semibold sm:text-3xl text-black">Verge Kit</span> is a solid foundation
    for building web applications with
    <a
      href="https://astro.build"
      target="_blank"
      rel="noopener"
      class="relative ml-[0.2em] inline-flex items-center gap-[0.2em] align-baseline leading-none font-semibold whitespace-nowrap no-underline hover:opacity-100 hover:after:absolute hover:after:inset-x-0 hover:after:-bottom-1 hover:after:border-b-2 hover:after:border-current hover:after:content-['']"
    ><img
        src="/tool-logos/astro-light-gradient.svg"
        alt=""
        aria-hidden="true"
        data-logo="astro"
        class="block h-[0.65em] w-auto shrink-0 translate-y-[0.06em]"
      />Astro</a>
    and the
    <a
      href="https://workers.dev"
      target="_blank"
      rel="noopener"
      class="relative ml-[0.2em] inline-flex items-center gap-[0.2em] align-baseline leading-none font-semibold whitespace-nowrap no-underline hover:opacity-100 hover:after:absolute hover:after:inset-x-0 hover:after:-bottom-1 hover:after:border-b-2 hover:after:border-current hover:after:content-['']"
    ><img
        src="/tool-logos/cloudflare.svg"
        alt=""
        aria-hidden="true"
        class="block h-[0.65em] w-auto shrink-0"
      />Cloudflare Workers</a>
    ecosystem.
  </p>
  <p class="mt-0 mb-4 last:mb-0 sm:mb-6 sm:text-pretty">
    The pre-wired stack includes
    <a
      href="https://orm.drizzle.team"
      target="_blank"
      rel="noopener"
      class="relative ml-[0.2em] inline-flex items-center gap-[0.2em] align-baseline leading-none font-semibold whitespace-nowrap no-underline hover:opacity-100 hover:after:absolute hover:after:inset-x-0 hover:after:-bottom-1 hover:after:border-b-2 hover:after:border-current hover:after:content-['']"
    ><img
        src="/tool-logos/drizzle.svg"
        alt=""
        aria-hidden="true"
        class="block h-[0.65em] w-auto shrink-0"
      />Drizzle</a>,
    <a
      href="https://www.better-auth.com"
      target="_blank"
      rel="noopener"
      class="relative ml-[0.2em] inline-flex items-center gap-[0.2em] align-baseline leading-none font-semibold whitespace-nowrap no-underline hover:opacity-100 hover:after:absolute hover:after:inset-x-0 hover:after:-bottom-1 hover:after:border-b-2 hover:after:border-current hover:after:content-['']"
    ><img
        src="/tool-logos/better-auth.svg"
        alt=""
        aria-hidden="true"
        class="block h-[0.65em] w-auto shrink-0"
      />Better Auth</a>,
    <a
      href="https://tailwindcss.com"
      target="_blank"
      rel="noopener"
      class="relative ml-[0.2em] inline-flex items-center gap-[0.2em] align-baseline leading-none font-semibold whitespace-nowrap no-underline hover:opacity-100 hover:after:absolute hover:after:inset-x-0 hover:after:-bottom-1 hover:after:border-b-2 hover:after:border-current hover:after:content-['']"
    ><img
        src="/tool-logos/tailwind-css.svg"
        alt=""
        aria-hidden="true"
        class="block h-[0.65em] w-auto shrink-0"
      />Tailwind</a>, and
    <a
      href="https://ui.bejamas.com"
      target="_blank"
      rel="noopener"
      class="relative ml-[0.2em] inline-flex items-center gap-[0.2em] align-baseline leading-none font-semibold whitespace-nowrap no-underline hover:opacity-100 hover:after:absolute hover:after:inset-x-0 hover:after:-bottom-1 hover:after:border-b-2 hover:after:border-current hover:after:content-['']"
    ><img
        src="/tool-logos/bejamas-ui.svg"
        alt=""
        aria-hidden="true"
        class="block h-[0.65em] w-auto shrink-0"
      />bejamas/ui</a>.
  </p>
  <p class="mt-0 last:mb-0 sm:text-pretty">
    We've also introduced a minimal boilerplate designed to help LLMs produce reliable and understandable code.
  </p>
</div>

<div class="mt-8 flex flex-wrap items-center justify-center gap-4 sm:mt-10">
  <a href="/overview" class="btn">
    <svg
      class="size-4 shrink-0 text-neutral-200"
      viewBox="0 0 448 512"
      aria-hidden="true"
    ><path
        fill="currentColor"
        d="M96 0C43 0 0 43 0 96v320c0 53 43 96 96 96h320c17.7 0 32-14.3 32-32s-14.3-32-32-32v-64c17.7 0 32-14.3 32-32V32c0-17.7-14.3-32-32-32zm0 384h256v64H96c-17.7 0-32-14.3-32-32s14.3-32 32-32m32-240c0-8.8 7.2-16 16-16h192c8.8 0 16 7.2 16 16s-7.2 16-16 16H144c-8.8 0-16-7.2-16-16m16 48h192c8.8 0 16 7.2 16 16s-7.2 16-16 16H144c-8.8 0-16-7.2-16-16s7.2-16 16-16"
      /></svg
    >
    Learn more
  </a>
  <a
    href="https://github.com/vergekit/vergekit"
    target="_blank"
    rel="noopener"
    class="btn"
    data-variant="outline"
  >
    <svg
      class="size-4 shrink-0"
      viewBox="0 0 24 24"
      fill="currentColor"
      aria-hidden="true"
    ><path
        d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
      /></svg
    >
    Source
  </a>
</div>