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

kbd-demo.tsx — ui Source File

Architecture documentation for kbd-demo.tsx, a tsx file in the ui codebase. 7 imports, 1 dependents.

File tsx DocumentationAtlas Changelog 7 imports 1 dependents 1 functions

Entity Profile

Dependency Diagram

graph LR
  88c3c647_485e_1477_0621_9c8fbd67a9bd["kbd-demo.tsx"]
  39a0d62e_8e7d_d097_eb95_91d2bca361f7["icons-react"]
  88c3c647_485e_1477_0621_9c8fbd67a9bd --> 39a0d62e_8e7d_d097_eb95_91d2bca361f7
  d39cd1e4_1b2d_9aa2_1d29_fd0b4bfb61c3["lucide-react"]
  88c3c647_485e_1477_0621_9c8fbd67a9bd --> d39cd1e4_1b2d_9aa2_1d29_fd0b4bfb61c3
  57e86e45_ac6e_7278_be08_9092724e8401["button"]
  88c3c647_485e_1477_0621_9c8fbd67a9bd --> 57e86e45_ac6e_7278_be08_9092724e8401
  d431e985_324f_ebc5_0383_4b336fa5e906["button-group"]
  88c3c647_485e_1477_0621_9c8fbd67a9bd --> d431e985_324f_ebc5_0383_4b336fa5e906
  41df1c2c_a3b4_dc22_8bc9_310fe8b6ba9b["input-group"]
  88c3c647_485e_1477_0621_9c8fbd67a9bd --> 41df1c2c_a3b4_dc22_8bc9_310fe8b6ba9b
  eef72ee8_5107_2380_708f_cd0adbb65f49["kbd"]
  88c3c647_485e_1477_0621_9c8fbd67a9bd --> eef72ee8_5107_2380_708f_cd0adbb65f49
  a2518e24_160d_3f8f_bb12_2206d8e84ab8["tooltip"]
  88c3c647_485e_1477_0621_9c8fbd67a9bd --> a2518e24_160d_3f8f_bb12_2206d8e84ab8
  1c2403dc_4584_9f39_4e98_855a7de18bd1["component-registry.ts"]
  1c2403dc_4584_9f39_4e98_855a7de18bd1 --> 88c3c647_485e_1477_0621_9c8fbd67a9bd
  style 88c3c647_485e_1477_0621_9c8fbd67a9bd fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import { IconArrowLeft, IconArrowRight } from "@tabler/icons-react"
import { CommandIcon, WavesIcon } from "lucide-react"

import { Button } from "@/registry/new-york-v4/ui/button"
import { ButtonGroup } from "@/registry/new-york-v4/ui/button-group"
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/registry/new-york-v4/ui/input-group"
import { Kbd, KbdGroup } from "@/registry/new-york-v4/ui/kbd"
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/registry/new-york-v4/ui/tooltip"

export function KbdDemo() {
  return (
    <div className="flex max-w-xs flex-col items-start gap-4">
      <div className="flex items-center gap-2">
        <Kbd>Ctrl</Kbd>
        <Kbd>⌘K</Kbd>
        <Kbd>Ctrl + B</Kbd>
      </div>
      <div className="flex items-center gap-2">
        <Kbd>⌘</Kbd>
        <Kbd>C</Kbd>
      </div>
      <KbdGroup>
        <Kbd>Ctrl</Kbd>
        <Kbd>Shift</Kbd>
        <Kbd>P</Kbd>
      </KbdGroup>
      <div className="flex items-center gap-2">
        <Kbd>↑</Kbd>
        <Kbd>↓</Kbd>
        <Kbd>←</Kbd>
        <Kbd>→</Kbd>
      </div>
      <KbdGroup>
        <Kbd>
          <CommandIcon />
        </Kbd>
        <Kbd>
          <IconArrowLeft />
        </Kbd>
        <Kbd>
          <IconArrowRight />
        </Kbd>
      </KbdGroup>
      <KbdGroup>
        <Kbd>
          <IconArrowLeft />
          Left
        </Kbd>
        <Kbd>
          <WavesIcon />
          Voice Enabled
        </Kbd>
      </KbdGroup>
      <InputGroup>
        <InputGroupInput />
        <InputGroupAddon>
          <Kbd>Space</Kbd>
        </InputGroupAddon>
      </InputGroup>
      <ButtonGroup>
        <Tooltip>
          <TooltipTrigger asChild>
            <Button size="sm" variant="outline">
              Save
            </Button>
          </TooltipTrigger>
          <TooltipContent>
            <div className="flex items-center gap-2">
              Save Changes <Kbd>S</Kbd>
            </div>
          </TooltipContent>
        </Tooltip>
        <Tooltip>
          <TooltipTrigger asChild>
            <Button size="sm" variant="outline">
              Print
            </Button>
          </TooltipTrigger>
          <TooltipContent>
            <div className="flex items-center gap-2">
              Print Document{" "}
              <KbdGroup>
                <Kbd>Ctrl</Kbd>
                <Kbd>P</Kbd>
              </KbdGroup>
            </div>
          </TooltipContent>
        </Tooltip>
      </ButtonGroup>
      <Kbd>
        <samp>File</samp>
      </Kbd>
    </div>
  )
}

Domain

Subdomains

Functions

Dependencies

  • button
  • button-group
  • icons-react
  • input-group
  • kbd
  • lucide-react
  • tooltip

Imported By

Source

Frequently Asked Questions

What does kbd-demo.tsx do?
kbd-demo.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 kbd-demo.tsx?
kbd-demo.tsx defines 1 function(s): KbdDemo.
What does kbd-demo.tsx depend on?
kbd-demo.tsx imports 7 module(s): button, button-group, icons-react, input-group, kbd, lucide-react, tooltip.
What files import kbd-demo.tsx?
kbd-demo.tsx is imported by 1 file(s): component-registry.ts.
Where is kbd-demo.tsx in the architecture?
kbd-demo.tsx is located at apps/v4/app/(internal)/sink/components/kbd-demo.tsx (domain: DocumentationAtlas, subdomain: Changelog, directory: apps/v4/app/(internal)/sink/components).

Analyze Your Own Codebase

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

Try Supermodel Free