# nikogoli/testing_shadcn_ui_for_deno architecture

> Architecture diagram of the GitHub repository nikogoli/testing_shadcn_ui_for_deno, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-08-05). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/nikogoli/testing_shadcn_ui_for_deno
- Repository: https://github.com/nikogoli/testing_shadcn_ui_for_deno

## Overview

#### Purpose and Consumption
This is a Deno-distributed compatibility library for using shadcn/ui-style React components in Fresh/Preact applications. Consumers import individual TSX modules directly from the package; there is no application, server route, or executable entry point in this repository. Primary public surface: `components/label.tsx`, `components/switch.tsx`, and the broader `components/` directory.

#### Runtime and Packaging Boundary
The library targets Deno and is configured by `deno.json`. Components run against Preact 10.19.6 through the React-compatibility layer, a material compatibility constraint. Dependencies are vendored/generated under `modules/esm.sh/`, including `modules/esm.sh/preact@10.19.6/compat.js`; consumers do not require a Node package installation.

#### Component Layer
Each file in `components/` is a reusable UI export, generally wrapping shadcn styling around a Radix primitive or native element. The component catalog spans base controls and composed overlays/navigation, e.g. `components/button.tsx`, `components/dialog.tsx`, `components/select.tsx`. Components are independently importable rather than collected behind a central barrel API.

#### Primitive Interaction Layer
Stateful and accessibility-sensitive components delegate interaction semantics to vendored Radix UI React primitives adapted to Preact compatibility. This boundary covers focus management, keyboard navigation, portals, dismissable layers, and controlled/uncontrolled state. Representative wrappers: `components/accordion.tsx`, `components/alert-dialog.tsx`, `components/toast.tsx`; underlying dependency artifacts: `modules/esm.sh/v132/@radix-ui/react-dialog@1.0.5/` and `modules/esm.sh/v133/@radix-ui/react-toast@1.1.5/`.

#### Styling and Theming Contract
Components emit Tailwind-compatible utility classes and assume the host Fresh application provides shadcn CSS custom properties, Tailwind/Twind color mappings, and animation definitions. Repository-side style assets are `css/shadcn.css` and `css/uno.css`. This is an explicit integration boundary: theme tokens and generated utilities belong to the consuming application, not a runtime stylesheet injection system.

#### Feedback and Overlay Composition
Toast support is split between Radix-backed presentational primitives and local toast composition/state-facing elements: `components/toast.tsx` and `components/toastElems.tsx`. Dialog, popover, menu, tooltip, and related controls use browser DOM/portal behavior through Radix, rather than any backend service.

#### External Services and Non-Goals
No database, API client, authentication system, queue, or server-side business domain exists in the tree. The only external dependency delivery mechanism is esm.sh-compatible vendored modules, with Radix UI, Preact, `cmdk`, class-variance-authority, `clsx`, and tailwind-merge represented under `modules/esm.sh/`. Several shadcn components requiring heavier external integrations are intentionally absent; the library’s architectural focus is portable UI primitives for Fresh.

Main entry points: [`modules/esm.sh/preact@10.19.6/compat.js`](https://github.com/nikogoli/testing_shadcn_ui_for_deno/blob/main/modules/esm.sh/preact%4010.19.6/compat.js) (Preact React compat), [`components/toast.tsx`](https://github.com/nikogoli/testing_shadcn_ui_for_deno/blob/main/components/toast.tsx) (Toast primitives), [`components/dialog.tsx`](https://github.com/nikogoli/testing_shadcn_ui_for_deno/blob/main/components/dialog.tsx) (Dialog), [`components/select.tsx`](https://github.com/nikogoli/testing_shadcn_ui_for_deno/blob/main/components/select.tsx) (Select)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_public["Public UI modules"]
  node_components["Component catalog<br/>independent TSX exports"]
  node_label["Label<br/>public component<br/>[label.tsx]"]
  node_switch["Switch<br/>public component<br/>[switch.tsx]"]
  node_button["Button<br/>public component<br/>[button.tsx]"]
  node_dialog["Dialog<br/>overlay wrapper<br/>[dialog.tsx]"]
  node_select["Select<br/>interactive wrapper<br/>[select.tsx]"]
  node_toast["Toast primitives<br/>Radix wrapper<br/>[toast.tsx]"]
  node_toast_elements["Toast composition<br/>local toast elements<br/>[toastElems.tsx]"]
end

subgraph group_interaction["Interaction primitives"]
  node_radix_dialog["Radix dialog<br/>vendored primitive"]
  node_radix_toast["Radix toast<br/>vendored primitive"]
  node_radix_primitives["Radix UI primitives<br/>vendored primitive suite"]
end

subgraph group_styling["Styling contract"]
  node_shadcn_css["shadcn theme tokens<br/>CSS contract<br/>[shadcn.css]"]
  node_uno_css["Utility mappings<br/>CSS contract<br/>[uno.css]"]
end

subgraph group_runtime["Deno compatibility runtime"]
  node_deno["Deno package config<br/>Deno configuration<br/>[deno.json]"]
  node_preact_compat["Preact React compat<br/>React compatibility layer<br/>[compat.js]"]
  node_vendored_modules["esm.sh vendored modules<br/>dependency delivery"]
end

node_consumer["Fresh/Preact consumer<br/>host application"]

node_consumer -->|"direct imports"| node_components
node_deno -->|"resolves dependencies"| node_vendored_modules
node_components -.->|"includes"| node_label
node_components -.->|"includes"| node_switch
node_components -.->|"includes"| node_button
node_components -.->|"includes"| node_dialog
node_components -.->|"includes"| node_select
node_components -.->|"includes"| node_toast
node_dialog -->|"wraps"| node_radix_dialog
node_toast -->|"wraps"| node_radix_toast
node_toast_elements -->|"composes"| node_toast
node_select -->|"delegates interaction"| node_radix_primitives
node_radix_primitives -->|"runs through"| node_preact_compat
node_radix_dialog -->|"runs through"| node_preact_compat
node_radix_toast -->|"runs through"| node_preact_compat
node_vendored_modules -->|"delivers"| node_radix_primitives
node_vendored_modules -->|"delivers"| node_preact_compat
node_components -.->|"uses theme tokens"| node_shadcn_css
node_components -.->|"emits compatible utilities"| node_uno_css
node_consumer -->|"provides"| node_shadcn_css
node_consumer -->|"provides"| node_uno_css

click node_deno "https://github.com/nikogoli/testing_shadcn_ui_for_deno/blob/main/deno.json"
click node_label "https://github.com/nikogoli/testing_shadcn_ui_for_deno/blob/main/components/label.tsx"
click node_switch "https://github.com/nikogoli/testing_shadcn_ui_for_deno/blob/main/components/switch.tsx"
click node_button "https://github.com/nikogoli/testing_shadcn_ui_for_deno/blob/main/components/button.tsx"
click node_dialog "https://github.com/nikogoli/testing_shadcn_ui_for_deno/blob/main/components/dialog.tsx"
click node_select "https://github.com/nikogoli/testing_shadcn_ui_for_deno/blob/main/components/select.tsx"
click node_toast "https://github.com/nikogoli/testing_shadcn_ui_for_deno/blob/main/components/toast.tsx"
click node_toast_elements "https://github.com/nikogoli/testing_shadcn_ui_for_deno/blob/main/components/toastElems.tsx"
click node_shadcn_css "https://github.com/nikogoli/testing_shadcn_ui_for_deno/blob/main/css/shadcn.css"
click node_uno_css "https://github.com/nikogoli/testing_shadcn_ui_for_deno/blob/main/css/uno.css"
click node_preact_compat "https://github.com/nikogoli/testing_shadcn_ui_for_deno/blob/main/modules/esm.sh/preact%4010.19.6/compat.js"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_components,node_label,node_switch,node_button,node_dialog,node_select,node_toast,node_toast_elements toneBlue
class node_radix_dialog,node_radix_toast,node_radix_primitives toneAmber
class node_shadcn_css,node_uno_css toneMint
class node_deno,node_preact_compat,node_vendored_modules toneRose
class node_consumer toneNeutral
```

## Components

### Public UI modules

Independently importable TSX component exports.

- **Component catalog**: independent TSX exports · No central barrel API; modules are imported directly.
- [Label](https://github.com/nikogoli/testing_shadcn_ui_for_deno/blob/main/components/label.tsx): public component · `components/label.tsx`
- [Switch](https://github.com/nikogoli/testing_shadcn_ui_for_deno/blob/main/components/switch.tsx): public component · `components/switch.tsx`
- [Button](https://github.com/nikogoli/testing_shadcn_ui_for_deno/blob/main/components/button.tsx): public component · `components/button.tsx`
- [Dialog](https://github.com/nikogoli/testing_shadcn_ui_for_deno/blob/main/components/dialog.tsx): overlay wrapper · Adds shadcn presentation around dialog behavior. · `components/dialog.tsx`
- [Select](https://github.com/nikogoli/testing_shadcn_ui_for_deno/blob/main/components/select.tsx): interactive wrapper · `components/select.tsx`
- [Toast primitives](https://github.com/nikogoli/testing_shadcn_ui_for_deno/blob/main/components/toast.tsx): Radix wrapper · Presentational toast components backed by Radix. · `components/toast.tsx`
- [Toast composition](https://github.com/nikogoli/testing_shadcn_ui_for_deno/blob/main/components/toastElems.tsx): local toast elements · Local state-facing toast composition elements. · `components/toastElems.tsx`

### Interaction primitives

Vendored accessibility and overlay behavior.

- **Radix dialog**: vendored primitive · Provides focus, portal, dismissal, and dialog semantics.
- **Radix toast**: vendored primitive · Provides toast state and accessibility semantics.
- **Radix UI primitives**: vendored primitive suite · Supplies keyboard, controlled-state, and overlay behavior.

### Styling contract

Host-provided shadcn theme and utility assumptions.

- [shadcn theme tokens](https://github.com/nikogoli/testing_shadcn_ui_for_deno/blob/main/css/shadcn.css): CSS contract · Defines CSS custom properties expected by component classes. · `css/shadcn.css`
- [Utility mappings](https://github.com/nikogoli/testing_shadcn_ui_for_deno/blob/main/css/uno.css): CSS contract · Provides utility and animation definitions for host integration. · `css/uno.css`

### Deno compatibility runtime

Deno configuration and vendored React-compatible dependencies.

- [Deno package config](https://github.com/nikogoli/testing_shadcn_ui_for_deno/blob/main/deno.json): Deno configuration · Defines the Deno-distributed library boundary. · `deno.json`
- [Preact React compat](https://github.com/nikogoli/testing_shadcn_ui_for_deno/blob/main/modules/esm.sh/preact%4010.19.6/compat.js): React compatibility layer · Preact 10.19.6 runtime compatibility boundary. · `modules/esm.sh/preact@10.19.6/compat.js`
- **esm.sh vendored modules**: dependency delivery · Deno-consumable vendored dependencies without Node installation.

### Other components

- **Fresh/Preact consumer**: host application · Imports component modules and supplies theme integration.

## Connections

- Fresh/Preact consumer → Component catalog: direct imports
- Deno package config → esm.sh vendored modules: resolves dependencies
- Component catalog → Label: includes
- Component catalog → Switch: includes
- Component catalog → Button: includes
- Component catalog → Dialog: includes
- Component catalog → Select: includes
- Component catalog → Toast primitives: includes
- Dialog → Radix dialog: wraps
- Toast primitives → Radix toast: wraps
- Toast composition → Toast primitives: composes
- Select → Radix UI primitives: delegates interaction
- Radix UI primitives → Preact React compat: runs through
- Radix dialog → Preact React compat: runs through
- Radix toast → Preact React compat: runs through
- esm.sh vendored modules → Radix UI primitives: delivers
- esm.sh vendored modules → Preact React compat: delivers
- Component catalog → shadcn theme tokens: uses theme tokens
- Component catalog → Utility mappings: emits compatible utilities
- Fresh/Preact consumer → shadcn theme tokens: provides
- Fresh/Preact consumer → Utility mappings: provides