Profile() — ui Function Reference

Architecture documentation for the Profile() function in github.tsx from the ui codebase.

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ Profile() — ui Function Reference

Dependency Diagram

graph TD
  39e84103_ef75_bca5_f8f4_d3c6c3a10fb2["Profile()"]
  ea47a897_f8a1_c141_0a31_7faa4e84543e["github.tsx"]
  39e84103_ef75_bca5_f8f4_d3c6c3a10fb2 -->|defined in| ea47a897_f8a1_c141_0a31_7faa4e84543e
  style 39e84103_ef75_bca5_f8f4_d3c6c3a10fb2 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/base/blocks/github.tsx lines 1180–1234

function Profile() {
  return (
    <Example title="Profile" className="items-center justify-center">
      <Card className="mx-auto w-full max-w-md">
        <CardHeader>
          <CardTitle>Profile</CardTitle>
          <CardDescription>Manage your profile information.</CardDescription>
        </CardHeader>
        <CardContent>
          <form id="profile">
            <FieldGroup>
              <Field>
                <FieldLabel htmlFor="name">Name</FieldLabel>
                <Input id="name" placeholder="shadcn" />
                <FieldDescription>
                  Your name may appear around GitHub where you contribute or are
                  mentioned. You can remove it at any time.
                </FieldDescription>
              </Field>
              <Field>
                <FieldLabel htmlFor="email">Public Email</FieldLabel>
                <NativeSelect id="email">
                  <NativeSelectOption value="m@shadcn.com">
                    m@shadcn.com
                  </NativeSelectOption>
                  <NativeSelectOption value="m@gmail.com">
                    m@gmail.com
                  </NativeSelectOption>
                </NativeSelect>
                <FieldDescription>
                  You can manage verified email addresses in your{" "}
                  <a href="#email-settings">email settings</a>.
                </FieldDescription>
              </Field>
              <Field>
                <FieldLabel htmlFor="bio">Bio</FieldLabel>
                <Textarea
                  id="bio"
                  placeholder="Tell us a little bit about yourself"
                />
                <FieldDescription>
                  You can <span>@mention</span> other users and organizations to
                  link to them.
                </FieldDescription>
              </Field>
            </FieldGroup>
          </form>
        </CardContent>
        <CardFooter>
          <Button form="profile">Save Profile</Button>
        </CardFooter>
      </Card>
    </Example>
  )
}