Model Selector
npm install @sarthakb009/model-selectorA 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.
``bash`
npm install @sarthakb009/model-selector
Make sure you have these installed in your project:
`bash`
npm install react react-dom lucide-react
Required versions:
- react ^18.0.0react-dom
- ^18.0.0lucide-react
- ^0.294.0
`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 (
models={models}
onChange={(modelId) => {
setSelectedId(modelId);
console.log('Selected:', modelId);
}}
/>
);
}
`
`tsx
import { ModelSelector } from '@sarthakb009/model-selector';
function App() {
return (
<>
models={models}
onChange={setSelectedId}
size="sm" // 'sm' | 'md' | 'lg'
/>
models={models}
onChange={setSelectedId}
size="lg"
/>
>
);
}
`
`tsx
import { ModelSelector } from '@sarthakb009/model-selector';
function App() {
return (
models={models}
onChange={setSelectedId}
isLoading={true}
/>
);
}
`
`tsx
import { ModelSelector } from '@sarthakb009/model-selector';
function App() {
return (
models={models}
onChange={setSelectedId}
disabled={true}
/>
);
}
`
| 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 |
`tsx`
interface ModelData {
id: string;
name: string;
provider: string;
description?: string;
icon?: LucideIcon;
tags?: string[];
}
- ✅ 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
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,
};
``
MIT