Component Examples

<UPageCard
  title="Feature Title"
  description="Feature description goes here"
  icon="i-lucide-star"
/>

<UPageCard
  title="Premium Feature"
  description="This card has a spotlight hover effect"
  icon="i-lucide-sparkles"
  spotlight
/>

<UPageGrid>
  <UPageCard
    v-for="item in items"
    :key="item.id"
    v-bind="item"
    spotlight
  />
</UPageGrid>

<UPageHero
  title="Welcome to Our Platform"
  description="Build amazing things with our tools"
  :links="[
    {
      label: 'Get Started',
      to: '/api-docs',
      icon: 'i-lucide-arrow-right',
      trailing: true
    }
  ]"
>
  <template #top>
    <HeroBackground />
  </template>
</UPageHero>

<UPageSection
  title="Key Features"
  description="Everything you need to succeed"
  :features="[
    {
      name: 'Fast Performance',
      description: 'Optimized for speed',
      icon: 'i-lucide-zap'
    },
    {
      name: 'Secure',
      description: 'Enterprise-grade security',
      icon: 'i-lucide-shield'
    }
  ]"
/>

<UPageSection
  title="What People Say"
  description="Trusted by thousands"
>
  <UPageColumns class="xl:columns-4">
    <UPageCard
      v-for="testimonial in testimonials"
      :key="testimonial.id"
      variant="subtle"
      :description="testimonial.quote"
    >
      <template #footer>
        <UUser
          :name="testimonial.user.name"
          :description="testimonial.user.role"
          :avatar="testimonial.user.avatar"
          size="lg"
        />
      </template>
    </UPageCard>
  </UPageColumns>
</UPageSection>

<UPageCTA
  title="Ready to get started?"
  description="Join thousands of users today"
  :links="[
    {
      label: 'Start Free Trial',
      to: useRuntimeConfig().public.registerUrl,
      target: '_blank',
      size: 'xl'
    },
    {
      label: 'Learn More',
      to: '/api-docs',
      variant: 'subtle',
      size: 'xl'
    }
  ]"
  variant="naked"
>
  <LazyStarsBg />
</UPageCTA>

<UContentNavigation
  :navigation="navigation"
  highlight
/>

<UContentToc
  :links="page.body.toc.links"
/>

<UContentSurround
  :surround="surround"
/>

<UForm
  :schema="schema"
  @submit="onSubmit"
>
  <UFormField
    name="email"
    label="Email"
    placeholder="Enter your email"
  />
  
  <UButton
    type="submit"
    label="Subscribe"
  />
</UForm>