Example() — ui Function Reference

Architecture documentation for the Example() function in example.tsx from the ui codebase.

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ Example() — ui Function Reference

Dependency Diagram

graph TD
  66e682a2_b8c3_79cd_270c_975f0028d6bd["Example()"]
  c69f6043_6338_2749_44ed_ae6b81e7bd56["example.tsx"]
  66e682a2_b8c3_79cd_270c_975f0028d6bd -->|defined in| c69f6043_6338_2749_44ed_ae6b81e7bd56
  style 66e682a2_b8c3_79cd_270c_975f0028d6bd fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/radix/components/example.tsx lines 18–53

function Example({
  title,
  children,
  className,
  containerClassName,
  ...props
}: React.ComponentProps<"div"> & {
  title?: string
  containerClassName?: string
}) {
  return (
    <div
      data-slot="example"
      className={cn(
        "mx-auto flex w-full max-w-lg min-w-0 flex-col gap-1 self-stretch lg:max-w-none",
        containerClassName
      )}
      {...props}
    >
      {title && (
        <div className="text-muted-foreground px-1.5 py-2 text-xs font-medium">
          {title}
        </div>
      )}
      <div
        data-slot="example-content"
        className={cn(
          "bg-background text-foreground flex min-w-0 flex-1 flex-col items-start gap-6 border border-dashed p-4 sm:p-6 *:[div:not([class*='w-'])]:w-full",
          className
        )}
      >
        {children}
      </div>
    </div>
  )
}