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 ChartRegistry 5 imports 4 functions

Entity Profile

Dependency Diagram

graph LR
  288ac524_a063_cb90_3755_edf03422f04d["sheet-example.tsx"]
  da02b53a_0c1d_d1a1_af31_74d99f1cdd7a["example"]
  288ac524_a063_cb90_3755_edf03422f04d --> da02b53a_0c1d_d1a1_af31_74d99f1cdd7a
  381135fe_5f7a_910a_b8a2_691e9756a016["button"]
  288ac524_a063_cb90_3755_edf03422f04d --> 381135fe_5f7a_910a_b8a2_691e9756a016
  e2659e08_4bcd_4a08_ab57_ce3a18c3b284["field"]
  288ac524_a063_cb90_3755_edf03422f04d --> e2659e08_4bcd_4a08_ab57_ce3a18c3b284
  dc919c5d_820f_f2af_7ccd_a07763a51161["input"]
  288ac524_a063_cb90_3755_edf03422f04d --> dc919c5d_820f_f2af_7ccd_a07763a51161
  b73decf8_f4b9_c52a_1a17_5592e0895a98["sheet"]
  288ac524_a063_cb90_3755_edf03422f04d --> b73decf8_f4b9_c52a_1a17_5592e0895a98
  style 288ac524_a063_cb90_3755_edf03422f04d fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

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

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

function SheetWithForm() {
  return (
    <Example title="With Form">
      <Sheet>
        <SheetTrigger asChild>
          <Button variant="outline">Open</Button>
        </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 asChild>
              <Button variant="outline">Close</Button>
            </SheetClose>
// ... (83 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, ChartRegistry 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/radix/examples/sheet-example.tsx (domain: ComponentRegistry, subdomain: ChartRegistry, directory: apps/v4/registry/bases/radix/examples).

Analyze Your Own Codebase

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

Try Supermodel Free