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 UIPrimitives 6 imports 6 functions

Entity Profile

Dependency Diagram

graph LR
  b99aef2d_c05c_2372_1b6a_76f9df348ed1["command-example.tsx"]
  1d141819_425e_b5fd_4c8e_32f7c6a42cf2["react"]
  b99aef2d_c05c_2372_1b6a_76f9df348ed1 --> 1d141819_425e_b5fd_4c8e_32f7c6a42cf2
  f56be340_a522_c6f7_dec3_5906873d14c8["example"]
  b99aef2d_c05c_2372_1b6a_76f9df348ed1 --> f56be340_a522_c6f7_dec3_5906873d14c8
  7328fa0a_98b6_fe77_42fd_0d1582b24604["button"]
  b99aef2d_c05c_2372_1b6a_76f9df348ed1 --> 7328fa0a_98b6_fe77_42fd_0d1582b24604
  deffd1e6_798d_b7fd_c687_7ccabc947893["card"]
  b99aef2d_c05c_2372_1b6a_76f9df348ed1 --> deffd1e6_798d_b7fd_c687_7ccabc947893
  52116b03_5db5_8ab7_55a8_616d3a09f401["command"]
  b99aef2d_c05c_2372_1b6a_76f9df348ed1 --> 52116b03_5db5_8ab7_55a8_616d3a09f401
  de6fac54_74ca_6c25_8f8b_d1ba3287dbf2["icon-placeholder"]
  b99aef2d_c05c_2372_1b6a_76f9df348ed1 --> de6fac54_74ca_6c25_8f8b_d1ba3287dbf2
  style b99aef2d_c05c_2372_1b6a_76f9df348ed1 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

"use client"

import * as React from "react"

import {
  Example,
  ExampleWrapper,
} from "@/registry/bases/base/components/example"
import { Button } from "@/registry/bases/base/ui/button"
import { Card, CardContent } from "@/registry/bases/base/ui/card"
import {
  Command,
  CommandDialog,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
  CommandShortcut,
} from "@/registry/bases/base/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, UIPrimitives 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/base/examples/command-example.tsx (domain: ComponentRegistry, subdomain: UIPrimitives, directory: apps/v4/registry/bases/base/examples).

Analyze Your Own Codebase

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

Try Supermodel Free