Annotated

Docs

Annotated

Use for settings pages. When settings are grouped thematically in annotated sections, the title and description on each section helps users quickly find the setting they’re looking for.

Store details

Your customers will use this information to contact you.

Store name

Account email

Notifications

Your customers will receive following notifications.

Read documentation

Order Confirmation

Order Invoice

Shipping Confirmation

Marketing

Usage

import { AnnotatedLayout, AnnotatedSection } from "@/components/ui/annotated"

<AnnotatedLayout>
  <AnnotatedSection
    title="Store details"
    description="Your customers will use this information to contact you."
  >
      Details
  </AnnotatedLayout>
</AnnotatedLayout>

Base components Avatar Group