ExamplesLayout() — ui Function Reference

Architecture documentation for the ExamplesLayout() function in layout.tsx from the ui codebase.

Function tsx ComponentRegistry Styles

Entity Profile

ComponentRegistry→ Styles→ ExamplesLayout() — ui Function Reference

Dependency Diagram

graph TD
  3835c7f9_f116_e305_ed2c_843fd84919e2["ExamplesLayout()"]
  ab2fdb9c_9854_b00e_b912_cad023d1373f["layout.tsx"]
  3835c7f9_f116_e305_ed2c_843fd84919e2 -->|defined in| ab2fdb9c_9854_b00e_b912_cad023d1373f
  style 3835c7f9_f116_e305_ed2c_843fd84919e2 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

deprecated/www/app/(app)/examples/layout.tsx lines 41–81

export default function ExamplesLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <>
      <PageHeader>
        <Announcement />
        <PageHeaderHeading>Build your component library</PageHeaderHeading>
        <PageHeaderDescription>
          A set of beautifully-designed, accessible components and a code
          distribution platform. Works with your favorite frameworks. Open
          Source. Open Code.
        </PageHeaderDescription>
        <PageActions>
          <Button asChild size="sm">
            <Link href="/docs">Get Started</Link>
          </Button>
          <Button asChild size="sm" variant="ghost">
            <Link href="/blocks">Browse Blocks</Link>
          </Button>
        </PageActions>
      </PageHeader>
      <div className="border-grid border-b">
        <div className="container-wrapper">
          <div className="container py-4">
            <ExamplesNav />
          </div>
        </div>
      </div>
      <div className="container-wrapper">
        <div className="container py-6">
          <section className="overflow-hidden rounded-[0.5rem] border bg-background shadow">
            {children}
          </section>
        </div>
      </div>
    </>
  )
}