ui Architecture Docs
Home / File/ command-example.tsx — ui Source File

command-example.tsx — ui Source File

Architecture documentation for command-example.tsx, a tsx file in the ui codebase. 6 imports, 0 dependents.

File tsx ComponentRegistry ChartRegistry 6 imports 6 functions

Entity Profile

Dependency Diagram

graph LR
  05451646_c67d_fa9d_bea2_9a9342a11b2c["command-example.tsx"]
  1d141819_425e_b5fd_4c8e_32f7c6a42cf2["react"]
  05451646_c67d_fa9d_bea2_9a9342a11b2c --> 1d141819_425e_b5fd_4c8e_32f7c6a42cf2
  da02b53a_0c1d_d1a1_af31_74d99f1cdd7a["example"]
  05451646_c67d_fa9d_bea2_9a9342a11b2c --> da02b53a_0c1d_d1a1_af31_74d99f1cdd7a
  381135fe_5f7a_910a_b8a2_691e9756a016["button"]
  05451646_c67d_fa9d_bea2_9a9342a11b2c --> 381135fe_5f7a_910a_b8a2_691e9756a016
  11818bc0_4ad2_fa77_9175_f5c44c22af5e["card"]
  05451646_c67d_fa9d_bea2_9a9342a11b2c --> 11818bc0_4ad2_fa77_9175_f5c44c22af5e
  cfa53265_167a_8d16_7060_57e9d7a3d701["command"]
  05451646_c67d_fa9d_bea2_9a9342a11b2c --> cfa53265_167a_8d16_7060_57e9d7a3d701
  de6fac54_74ca_6c25_8f8b_d1ba3287dbf2["icon-placeholder"]
  05451646_c67d_fa9d_bea2_9a9342a11b2c --> de6fac54_74ca_6c25_8f8b_d1ba3287dbf2
  style 05451646_c67d_fa9d_bea2_9a9342a11b2c fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

"use client"

import * as React from "react"

import {
  Example,
  ExampleWrapper,
} from "@/registry/bases/radix/components/example"
import { Button } from "@/registry/bases/radix/ui/button"
import { Card, CardContent } from "@/registry/bases/radix/ui/card"
import {
  Command,
  CommandDialog,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
  CommandShortcut,
} from "@/registry/bases/radix/ui/command"
import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"

export default function CommandExample() {
  return (
    <ExampleWrapper>
      <CommandInline />
      <CommandBasic />
      <CommandWithShortcuts />
      <CommandWithGroups />
      <CommandManyItems />
    </ExampleWrapper>
  )
}

function CommandInline() {
  return (
    <Example title="Inline">
      <Card className="w-full p-0">
        <CardContent className="p-0">
          <Command>
            <CommandInput placeholder="Type a command or search..." />
            <CommandList>
              <CommandEmpty>No results found.</CommandEmpty>
              <CommandGroup heading="Suggestions">
                <CommandItem>
                  <IconPlaceholder
                    lucide="CalendarIcon"
                    tabler="IconCalendar"
                    hugeicons="CalendarIcon"
                    phosphor="CalendarBlankIcon"
                    remixicon="RiCalendarLine"
                  />
                  <span>Calendar</span>
                </CommandItem>
                <CommandItem>
                  <IconPlaceholder
                    lucide="SmileIcon"
                    tabler="IconMoodSmile"
                    hugeicons="SmileIcon"
// ... (531 more lines)

Domain

Subdomains

Functions

Dependencies

  • button
  • card
  • command
  • example
  • icon-placeholder
  • react

Source

Frequently Asked Questions

What does command-example.tsx do?
command-example.tsx is a source file in the ui codebase, written in tsx. It belongs to the ComponentRegistry domain, ChartRegistry subdomain.
What functions are defined in command-example.tsx?
command-example.tsx defines 6 function(s): CommandBasic, CommandExample, CommandInline, CommandManyItems, CommandWithGroups, CommandWithShortcuts.
What does command-example.tsx depend on?
command-example.tsx imports 6 module(s): button, card, command, example, icon-placeholder, react.
Where is command-example.tsx in the architecture?
command-example.tsx is located at apps/v4/registry/bases/radix/examples/command-example.tsx (domain: ComponentRegistry, subdomain: ChartRegistry, directory: apps/v4/registry/bases/radix/examples).

Analyze Your Own Codebase

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

Try Supermodel Free