Typedora UI - Type-Safe Components for React

Introduction

Typedora UI is a next-generation extension layer for shadcn/ui, designed to bring full type-safety to your UI components.

Why Type-Safety Matters

Type-safe components catch errors at compile time, provide better autocomplete, and make refactoring safer. No more any types or runtime surprises.

Quick Start

Install a component using the shadcn CLI:

npx shadcn@latest add https://typedora-ui.netlify.app/r/typed-select.json

pnpm dlx shadcn@latest add https://typedora-ui.netlify.app/r/typed-select.json

npx shadcn@latest add https://typedora-ui.netlify.app/r/typed-select.json

bunx --bun shadcn@latest add https://typedora-ui.netlify.app/r/typed-select.json

Example

import {  } from "@/components/typed-select";

const  = [
  { : "apple", : "Apple" },
  { : "banana", : "Banana" },
  { : "orange", : "Orange" },
] as ;

<
  ={}
  ={(value) => {                  
value: "apple" | "banana" | "orange"
  }}
/>

Available Components

TypedSelect

Type-safe select with grouped options and custom rendering.

TypedCombobox

Type-safe combobox with search, grouped options, and custom rendering.

TypedRadioGroup

Headless radio group with render props for complete customization.

Typed Utils

Utility types for extracting option types and values.

Requirements

React 18+
A project configured with shadcn/ui
TypeScript (recommended)

Philosophy

Typedora UI follows these principles:

Type-Safety First — Every component provides full TypeScript inference
Headless by Design — Use render props for complete control over rendering
shadcn Compatible — Drop-in replacements that work with your existing setup
Zero Lock-in — Copy the source code, own your components

Getting Started