SectionCard

App

Titled content card with rounded-xl + border + bg-surface-raised + p-6. Header is separated by an underline; children slot accepts arbitrary content.

Tek bölüm

Preview

Preferences

Form fields go here.

Code
<SectionCard title="Preferences">
  <Input id="name" label="Display name" value={name} onChange={...} />
  <Toggle id="notify" label="Email notifications" checked={notify} onChange={setNotify} />
</SectionCard>

Birden fazla bölüm

Preview

Profile

Personal information fields.

Security

Password change form.

Code
<SectionCard title="Profile">
  <UserProfileForm ... />
</SectionCard>
<SectionCard title="Security">
  <ChangePasswordForm ... />
</SectionCard>
Sourcemodules/app/SectionCard.tsx