ui Architecture Docs
Home / File/ sonner-demo.tsx — ui Source File

sonner-demo.tsx — ui Source File

Architecture documentation for sonner-demo.tsx, a tsx file in the ui codebase. 2 imports, 0 dependents.

File tsx DocumentationAtlas ContentSourcing 2 imports 1 functions

Entity Profile

Dependency Diagram

graph LR
  bb6ba70b_e8c4_1160_c699_efd4da6c35f1["sonner-demo.tsx"]
  4544fa74_9b37_0912_c55e_f4ff161b8e83["button"]
  bb6ba70b_e8c4_1160_c699_efd4da6c35f1 --> 4544fa74_9b37_0912_c55e_f4ff161b8e83
  e750d152_1191_1793_7244_99c7f9c595f4["sonner"]
  bb6ba70b_e8c4_1160_c699_efd4da6c35f1 --> e750d152_1191_1793_7244_99c7f9c595f4
  style bb6ba70b_e8c4_1160_c699_efd4da6c35f1 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

"use client"

import { Button } from "@/examples/base/ui/button"
import { toast } from "sonner"

export function SonnerDemo() {
  return (
    <Button
      variant="outline"
      onClick={() =>
        toast("Event has been created", {
          description: "Sunday, December 03, 2023 at 9:00 AM",
          action: {
            label: "Undo",
            onClick: () => console.log("Undo"),
          },
        })
      }
    >
      Show Toast
    </Button>
  )
}

Domain

Subdomains

Functions

Dependencies

  • button
  • sonner

Source

Frequently Asked Questions

What does sonner-demo.tsx do?
sonner-demo.tsx is a source file in the ui codebase, written in tsx. It belongs to the DocumentationAtlas domain, ContentSourcing subdomain.
What functions are defined in sonner-demo.tsx?
sonner-demo.tsx defines 1 function(s): SonnerDemo.
What does sonner-demo.tsx depend on?
sonner-demo.tsx imports 2 module(s): button, sonner.
Where is sonner-demo.tsx in the architecture?
sonner-demo.tsx is located at apps/v4/examples/base/sonner-demo.tsx (domain: DocumentationAtlas, subdomain: ContentSourcing, directory: apps/v4/examples/base).

Analyze Your Own Codebase

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

Try Supermodel Free