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

popover-example.tsx — ui Source File

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

File tsx ComponentRegistry UIPrimitives 6 imports 6 functions

Entity Profile

Dependency Diagram

graph LR
  77b374ed_0d6d_ff09_1f6b_36c4bd1d2249["popover-example.tsx"]
  f56be340_a522_c6f7_dec3_5906873d14c8["example"]
  77b374ed_0d6d_ff09_1f6b_36c4bd1d2249 --> f56be340_a522_c6f7_dec3_5906873d14c8
  7328fa0a_98b6_fe77_42fd_0d1582b24604["button"]
  77b374ed_0d6d_ff09_1f6b_36c4bd1d2249 --> 7328fa0a_98b6_fe77_42fd_0d1582b24604
  bf79f9bb_684a_daf2_047f_c53b74f509e8["dialog"]
  77b374ed_0d6d_ff09_1f6b_36c4bd1d2249 --> bf79f9bb_684a_daf2_047f_c53b74f509e8
  8a527dea_9425_3da4_8ceb_ec3058568dc9["field"]
  77b374ed_0d6d_ff09_1f6b_36c4bd1d2249 --> 8a527dea_9425_3da4_8ceb_ec3058568dc9
  106d51d9_3961_e810_478c_8a9c54987d20["input"]
  77b374ed_0d6d_ff09_1f6b_36c4bd1d2249 --> 106d51d9_3961_e810_478c_8a9c54987d20
  be464fc7_420f_996e_18a3_0f0f01945197["popover"]
  77b374ed_0d6d_ff09_1f6b_36c4bd1d2249 --> be464fc7_420f_996e_18a3_0f0f01945197
  style 77b374ed_0d6d_ff09_1f6b_36c4bd1d2249 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 {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/registry/bases/base/ui/dialog"
import { Field, FieldGroup, FieldLabel } from "@/registry/bases/base/ui/field"
import { Input } from "@/registry/bases/base/ui/input"
import {
  Popover,
  PopoverContent,
  PopoverDescription,
  PopoverHeader,
  PopoverTitle,
  PopoverTrigger,
} from "@/registry/bases/base/ui/popover"

export default function PopoverExample() {
  return (
    <ExampleWrapper>
      <PopoverBasic />
      <PopoverSides />
      <PopoverWithForm />
      <PopoverAlignments />
      <PopoverInDialog />
    </ExampleWrapper>
  )
}

function PopoverBasic() {
  return (
    <Example title="Basic">
      <Popover>
        <PopoverTrigger render={<Button variant="outline" className="w-fit" />}>
          Open Popover
        </PopoverTrigger>
        <PopoverContent align="start">
          <PopoverHeader>
            <PopoverTitle>Dimensions</PopoverTitle>
            <PopoverDescription>
              Set the dimensions for the layer.
            </PopoverDescription>
          </PopoverHeader>
        </PopoverContent>
      </Popover>
    </Example>
  )
}

function PopoverSides() {
  return (
    <Example title="Sides">
      <div className="flex flex-col gap-2">
// ... (140 more lines)

Domain

Subdomains

Functions

Dependencies

  • button
  • dialog
  • example
  • field
  • input
  • popover

Source

Frequently Asked Questions

What does popover-example.tsx do?
popover-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 popover-example.tsx?
popover-example.tsx defines 6 function(s): PopoverAlignments, PopoverBasic, PopoverExample, PopoverInDialog, PopoverSides, PopoverWithForm.
What does popover-example.tsx depend on?
popover-example.tsx imports 6 module(s): button, dialog, example, field, input, popover.
Where is popover-example.tsx in the architecture?
popover-example.tsx is located at apps/v4/registry/bases/base/examples/popover-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