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

sonner-position.tsx — ui Source File

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

File tsx DocumentationAtlas Changelog 2 imports 1 functions

Entity Profile

Dependency Diagram

graph LR
  a2f8e95a_bb27_d028_7c93_4940ae40d89f["sonner-position.tsx"]
  4b1d2128_46d9_46f0_b915_b6e1925b7876["button"]
  a2f8e95a_bb27_d028_7c93_4940ae40d89f --> 4b1d2128_46d9_46f0_b915_b6e1925b7876
  e750d152_1191_1793_7244_99c7f9c595f4["sonner"]
  a2f8e95a_bb27_d028_7c93_4940ae40d89f --> e750d152_1191_1793_7244_99c7f9c595f4
  style a2f8e95a_bb27_d028_7c93_4940ae40d89f fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

"use client"

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

export function SonnerPosition() {
  return (
    <div className="flex flex-wrap justify-center gap-2">
      <Button
        variant="outline"
        onClick={() =>
          toast("Event has been created", { position: "top-left" })
        }
      >
        Top Left
      </Button>
      <Button
        variant="outline"
        onClick={() =>
          toast("Event has been created", { position: "top-center" })
        }
      >
        Top Center
      </Button>
      <Button
        variant="outline"
        onClick={() =>
          toast("Event has been created", { position: "top-right" })
        }
      >
        Top Right
      </Button>
      <Button
        variant="outline"
        onClick={() =>
          toast("Event has been created", { position: "bottom-left" })
        }
      >
        Bottom Left
      </Button>
      <Button
        variant="outline"
        onClick={() =>
          toast("Event has been created", { position: "bottom-center" })
        }
      >
        Bottom Center
      </Button>
      <Button
        variant="outline"
        onClick={() =>
          toast("Event has been created", { position: "bottom-right" })
        }
      >
        Bottom Right
      </Button>
    </div>
  )
}

Domain

Subdomains

Functions

Dependencies

  • button
  • sonner

Source

Frequently Asked Questions

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

Analyze Your Own Codebase

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

Try Supermodel Free