ui Architecture Docs
Home / File/ sheet-example.tsx — ui Source File

sheet-example.tsx — ui Source File

Architecture documentation for sheet-example.tsx, a tsx file in the ui codebase. 5 imports, 0 dependents.

File tsx ComponentRegistry UIPrimitives 5 imports 4 functions

Entity Profile

Dependency Diagram

graph LR
  7c6f9369_bf6a_075e_aad5_62244e987dba["sheet-example.tsx"]
  f56be340_a522_c6f7_dec3_5906873d14c8["example"]
  7c6f9369_bf6a_075e_aad5_62244e987dba --> f56be340_a522_c6f7_dec3_5906873d14c8
  7328fa0a_98b6_fe77_42fd_0d1582b24604["button"]
  7c6f9369_bf6a_075e_aad5_62244e987dba --> 7328fa0a_98b6_fe77_42fd_0d1582b24604
  8a527dea_9425_3da4_8ceb_ec3058568dc9["field"]
  7c6f9369_bf6a_075e_aad5_62244e987dba --> 8a527dea_9425_3da4_8ceb_ec3058568dc9
  106d51d9_3961_e810_478c_8a9c54987d20["input"]
  7c6f9369_bf6a_075e_aad5_62244e987dba --> 106d51d9_3961_e810_478c_8a9c54987d20
  1245aa1b_8939_064e_453d_c3383601eb22["sheet"]
  7c6f9369_bf6a_075e_aad5_62244e987dba --> 1245aa1b_8939_064e_453d_c3383601eb22
  style 7c6f9369_bf6a_075e_aad5_62244e987dba fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import {
  Example,
  ExampleWrapper,
} from "@/registry/bases/base/components/example"
import { Button } from "@/registry/bases/base/ui/button"
import { Field, FieldGroup, FieldLabel } from "@/registry/bases/base/ui/field"
import { Input } from "@/registry/bases/base/ui/input"
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/registry/bases/base/ui/sheet"

export default function SheetExample() {
  return (
    <ExampleWrapper>
      <SheetWithForm />
      <SheetNoCloseButton />
      <SheetWithSides />
    </ExampleWrapper>
  )
}

function SheetWithForm() {
  return (
    <Example title="With Form">
      <Sheet>
        <SheetTrigger render={<Button variant="outline" />}>Open</SheetTrigger>
        <SheetContent>
          <SheetHeader>
            <SheetTitle>Edit profile</SheetTitle>
            <SheetDescription>
              Make changes to your profile here. Click save when you&apos;re
              done.
            </SheetDescription>
          </SheetHeader>
          <div className="style-vega:px-4 style-maia:px-6 style-mira:px-6 style-lyra:px-4 style-nova:px-4">
            <FieldGroup>
              <Field>
                <FieldLabel htmlFor="sheet-demo-name">Name</FieldLabel>
                <Input id="sheet-demo-name" defaultValue="Pedro Duarte" />
              </Field>
              <Field>
                <FieldLabel htmlFor="sheet-demo-username">Username</FieldLabel>
                <Input id="sheet-demo-username" defaultValue="@peduarte" />
              </Field>
            </FieldGroup>
          </div>
          <SheetFooter>
            <Button type="submit">Save changes</Button>
            <SheetClose render={<Button variant="outline" />}>Close</SheetClose>
          </SheetFooter>
        </SheetContent>
      </Sheet>
    </Example>
// ... (79 more lines)

Domain

Subdomains

Functions

Dependencies

  • button
  • example
  • field
  • input
  • sheet

Source

Frequently Asked Questions

What does sheet-example.tsx do?
sheet-example.tsx is a source file in the ui codebase, written in tsx. It belongs to the ComponentRegistry domain, UIPrimitives subdomain.
What functions are defined in sheet-example.tsx?
sheet-example.tsx defines 4 function(s): SheetExample, SheetNoCloseButton, SheetWithForm, SheetWithSides.
What does sheet-example.tsx depend on?
sheet-example.tsx imports 5 module(s): button, example, field, input, sheet.
Where is sheet-example.tsx in the architecture?
sheet-example.tsx is located at apps/v4/registry/bases/base/examples/sheet-example.tsx (domain: ComponentRegistry, subdomain: UIPrimitives, directory: apps/v4/registry/bases/base/examples).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free