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

select-demo.tsx — ui Source File

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

File tsx DocumentationAtlas SearchAPI 3 imports 1 dependents 1 functions

Entity Profile

Dependency Diagram

graph LR
  ad137c95_9692_5312_8179_6deb4d709bd5["select-demo.tsx"]
  1d141819_425e_b5fd_4c8e_32f7c6a42cf2["react"]
  ad137c95_9692_5312_8179_6deb4d709bd5 --> 1d141819_425e_b5fd_4c8e_32f7c6a42cf2
  d39cd1e4_1b2d_9aa2_1d29_fd0b4bfb61c3["lucide-react"]
  ad137c95_9692_5312_8179_6deb4d709bd5 --> d39cd1e4_1b2d_9aa2_1d29_fd0b4bfb61c3
  c2fa7225_1ddd_1cbc_8810_ee5e42af14d6["select"]
  ad137c95_9692_5312_8179_6deb4d709bd5 --> c2fa7225_1ddd_1cbc_8810_ee5e42af14d6
  1c2403dc_4584_9f39_4e98_855a7de18bd1["component-registry.ts"]
  1c2403dc_4584_9f39_4e98_855a7de18bd1 --> ad137c95_9692_5312_8179_6deb4d709bd5
  style ad137c95_9692_5312_8179_6deb4d709bd5 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import * as React from "react"
import {
  ChartBarIcon,
  ChartLineIcon,
  ChartPieIcon,
  CircleDashed,
} from "lucide-react"

import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from "@/registry/new-york-v4/ui/select"

export function SelectDemo() {
  return (
    <div className="flex flex-wrap items-start gap-4">
      <Select>
        <SelectTrigger className="w-[180px]">
          <SelectValue placeholder="Select a fruit" />
        </SelectTrigger>
        <SelectContent>
          <SelectGroup>
            <SelectLabel>Fruits</SelectLabel>
            <SelectItem value="apple">Apple</SelectItem>
            <SelectItem value="banana">Banana</SelectItem>
            <SelectItem value="blueberry">Blueberry</SelectItem>
            <SelectItem value="grapes" disabled>
              Grapes
            </SelectItem>
            <SelectItem value="pineapple">Pineapple</SelectItem>
          </SelectGroup>
        </SelectContent>
      </Select>
      <Select>
        <SelectTrigger className="w-[180px]">
          <SelectValue placeholder="Large List" />
        </SelectTrigger>
        <SelectContent>
          {Array.from({ length: 100 }).map((_, i) => (
            <SelectItem key={i} value={`item-${i}`}>
              Item {i}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
      <Select disabled>
        <SelectTrigger className="w-[180px]">
          <SelectValue placeholder="Disabled" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="apple">Apple</SelectItem>
          <SelectItem value="banana">Banana</SelectItem>
          <SelectItem value="blueberry">Blueberry</SelectItem>
          <SelectItem value="grapes" disabled>
            Grapes
          </SelectItem>
          <SelectItem value="pineapple">Pineapple</SelectItem>
        </SelectContent>
      </Select>
      <Select>
        <SelectTrigger className="w-[180px]">
          <SelectValue
            placeholder={
              <>
                <CircleDashed className="text-muted-foreground" />
                With Icon
              </>
            }
          />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="line">
            <ChartLineIcon />
            Line
          </SelectItem>
          <SelectItem value="bar">
            <ChartBarIcon />
            Bar
          </SelectItem>
          <SelectItem value="pie">
            <ChartPieIcon />
            Pie
          </SelectItem>
        </SelectContent>
      </Select>
    </div>
  )
}

Domain

Subdomains

Functions

Dependencies

  • lucide-react
  • react
  • select

Imported By

Source

Frequently Asked Questions

What does select-demo.tsx do?
select-demo.tsx is a source file in the ui codebase, written in tsx. It belongs to the DocumentationAtlas domain, SearchAPI subdomain.
What functions are defined in select-demo.tsx?
select-demo.tsx defines 1 function(s): SelectDemo.
What does select-demo.tsx depend on?
select-demo.tsx imports 3 module(s): lucide-react, react, select.
What files import select-demo.tsx?
select-demo.tsx is imported by 1 file(s): component-registry.ts.
Where is select-demo.tsx in the architecture?
select-demo.tsx is located at apps/v4/app/(internal)/sink/components/select-demo.tsx (domain: DocumentationAtlas, subdomain: SearchAPI, 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