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

native-select-demo.tsx — ui Source File

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

File tsx DocumentationAtlas SearchAPI 2 imports 1 dependents 1 functions

Entity Profile

Dependency Diagram

graph LR
  df5897d1_4912_ac7f_f099_6644db6cddfa["native-select-demo.tsx"]
  07a2ee22_9641_0a2c_60f0_2b0eb0a8f9b2["native-select"]
  df5897d1_4912_ac7f_f099_6644db6cddfa --> 07a2ee22_9641_0a2c_60f0_2b0eb0a8f9b2
  c2fa7225_1ddd_1cbc_8810_ee5e42af14d6["select"]
  df5897d1_4912_ac7f_f099_6644db6cddfa --> c2fa7225_1ddd_1cbc_8810_ee5e42af14d6
  1c2403dc_4584_9f39_4e98_855a7de18bd1["component-registry.ts"]
  1c2403dc_4584_9f39_4e98_855a7de18bd1 --> df5897d1_4912_ac7f_f099_6644db6cddfa
  style df5897d1_4912_ac7f_f099_6644db6cddfa fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

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

export function NativeSelectDemo() {
  return (
    <div className="flex flex-col gap-8">
      <div className="flex flex-col gap-3">
        <div className="text-muted-foreground text-sm font-medium">
          Basic Select
        </div>
        <div className="flex flex-col gap-4">
          <NativeSelect>
            <NativeSelectOption value="">Select a fruit</NativeSelectOption>
            <NativeSelectOption value="apple">Apple</NativeSelectOption>
            <NativeSelectOption value="banana">Banana</NativeSelectOption>
            <NativeSelectOption value="blueberry">Blueberry</NativeSelectOption>
            <NativeSelectOption value="grapes" disabled>
              Grapes
            </NativeSelectOption>
            <NativeSelectOption value="pineapple">Pineapple</NativeSelectOption>
          </NativeSelect>
          <Select>
            <SelectTrigger>
              <SelectValue placeholder="Select a fruit" />
            </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>
        </div>
      </div>
      <div className="flex flex-col gap-3">
        <div className="text-muted-foreground text-sm font-medium">
          With Groups
        </div>
        <div className="flex flex-col gap-4">
          <NativeSelect>
            <NativeSelectOption value="">Select a food</NativeSelectOption>
            <NativeSelectOptGroup label="Fruits">
              <NativeSelectOption value="apple">Apple</NativeSelectOption>
              <NativeSelectOption value="banana">Banana</NativeSelectOption>
              <NativeSelectOption value="blueberry">
// ... (76 more lines)

Domain

Subdomains

Functions

Dependencies

  • native-select
  • select

Imported By

Source

Frequently Asked Questions

What does native-select-demo.tsx do?
native-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 native-select-demo.tsx?
native-select-demo.tsx defines 1 function(s): NativeSelectDemo.
What does native-select-demo.tsx depend on?
native-select-demo.tsx imports 2 module(s): native-select, select.
What files import native-select-demo.tsx?
native-select-demo.tsx is imported by 1 file(s): component-registry.ts.
Where is native-select-demo.tsx in the architecture?
native-select-demo.tsx is located at apps/v4/app/(internal)/sink/components/native-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