SelectPlan() — ui Function Reference

Architecture documentation for the SelectPlan() function in select-example.tsx from the ui codebase.

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ SelectPlan() — ui Function Reference

Dependency Diagram

graph TD
  77c12447_63cf_14d1_c56d_8493aa7fa2c8["SelectPlan()"]
  da287030_2184_07ad_21e7_133141a5c3fa["select-example.tsx"]
  77c12447_63cf_14d1_c56d_8493aa7fa2c8 -->|defined in| da287030_2184_07ad_21e7_133141a5c3fa
  style 77c12447_63cf_14d1_c56d_8493aa7fa2c8 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/base/examples/select-example.tsx lines 604–628

function SelectPlan() {
  return (
    <Example title="Subscription Plan">
      <Select
        defaultValue={plans[0]}
        itemToStringValue={(plan: (typeof plans)[number]) => plan.name}
      >
        <SelectTrigger className="h-auto! w-72">
          <SelectValue>
            {(value: (typeof plans)[number]) => <SelectPlanItem plan={value} />}
          </SelectValue>
        </SelectTrigger>
        <SelectContent>
          <SelectGroup>
            {plans.map((plan) => (
              <SelectItem key={plan.name} value={plan}>
                <SelectPlanItem plan={plan} />
              </SelectItem>
            ))}
          </SelectGroup>
        </SelectContent>
      </Select>
    </Example>
  )
}