ModelSelector

A React dropdown component for selecting AI models with search, descriptions, and custom icons. Perfect for AI applications, model switching interfaces, or configuration panels. Built with TypeScript.

Installation

``bash
npm install @sarthakb009/model-selector
`

Peer Dependencies

Make sure you have these installed in your project:

`bash
npm install react react-dom lucide-react
`

Required versions:
- react ^18.0.0
- react-dom ^18.0.0
- lucide-react ^0.294.0

Usage

$3

`tsx
import { ModelSelector } from '@sarthakb009/model-selector';
import { Sparkles, Box } from 'lucide-react';
import { useState } from 'react';

function App() {
const [selectedId, setSelectedId] = useState('gpt-4');

const models = [
{
id: 'gpt-4',
name: 'GPT-4',
provider: 'OpenAI',
description: 'Most capable model',
icon: Sparkles,
},
{
id: 'gpt-3.5',
name: 'GPT-3.5 Turbo',
provider: 'OpenAI',
description: 'Fast and efficient',
icon: Box,
},
];

return (
selectedId={selectedId}
models={models}
onChange={(modelId) => {
setSelectedId(modelId);
console.log('Selected:', modelId);
}}
/>
);
}
`

$3

`tsx
import { ModelSelector } from '@sarthakb009/model-selector';

function App() {
return (
<>
selectedId={selectedId}
models={models}
onChange={setSelectedId}
size="sm" // 'sm' | 'md' | 'lg'
/>

selectedId={selectedId}
models={models}
onChange={setSelectedId}
size="lg"
/>

);
}
`

$3

`tsx
import { ModelSelector } from '@sarthakb009/model-selector';

function App() {
return (
selectedId={selectedId}
models={models}
onChange={setSelectedId}
isLoading={true}
/>
);
}
`

$3

`tsx
import { ModelSelector } from '@sarthakb009/model-selector';

function App() {
return (
selectedId={selectedId}
models={models}
onChange={setSelectedId}
disabled={true}
/>
);
}
`

Props

| Prop | Type | Default | Required | Description |
|------|------|---------|----------|-------------|
| selectedId | string | - | Yes | The currently selected model ID |
| models | ModelData[] | - | Yes | Array of available models |
| onChange | (modelId: string) => void | - | Yes | Callback fired when a model is selected |
| size | 'sm' \| 'md' \| 'lg' | 'md' | No | Visual size of the component |
| className | string | undefined | No | Additional CSS classes |
| disabled | boolean | false | No | Disable interaction |
| isLoading | boolean | false | No | Show loading spinner state |

ModelData Type

`tsx
interface ModelData {
id: string;
name: string;
provider: string;
description?: string;
icon?: LucideIcon;
tags?: string[];
}
`

Features

- ✅ Dropdown Interface: Clean, accessible dropdown
- ✅ Model Information: Display name, provider, and description
- ✅ Custom Icons: Support for Lucide icons
- ✅ Multiple Sizes: Small, medium, and large variants
- ✅ Loading State: Built-in loading indicator
- ✅ Keyboard Navigation: Full keyboard support
- ✅ Click Outside: Closes when clicking outside
- ✅ TypeScript: Full TypeScript support with exported types
- ✅ Accessible: Proper ARIA labels and focus management

TypeScript

The component is written in TypeScript and exports all types:

`tsx
import {
ModelSelector,
ModelSelectorProps,
ModelData,
ModelSize,
} from '@sarthakb009/model-selector';

const model: ModelData = {
id: 'gpt-4',
name: 'GPT-4',
provider: 'OpenAI',
description: 'Most capable model',
};

const props: ModelSelectorProps = {
selectedId: 'gpt-4',
models: [model],
onChange: (id) => console.log(id),
size: 'md' as ModelSize,
};
``

License

MIT