Combobox
Thumbnail Options
Выбор варианта с превью: у каждой строки картинка, а если ссылки нет — свой градиент с инициалами, оттенок которого детерминированно считается из названия.
- combobox
- thumbnail
- templates
- visual
Превью
1440pxHost theme
Использовать с AI
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из registry.
размести это в шапке: https://vibeui.ru/c/combobox-014
Выбран шаблон: Брошенная корзина
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
# Установка и размещение «combobox-014» (Thumbnail Options) из VibeUI
## 1. Сначала установка — не пропускай, не пересоздавай
Выполни эту команду до того, как писать код:
npx shadcn@latest add https://vibeui.ru/r/combobox-014.json
Registry item: https://vibeui.ru/r/combobox-014.json
Ставится в: components/vibeui/combobox-014.tsx (точный путь следует алиасам components.json этого проекта).
npm-зависимости: нет.
Registry-зависимости: нет.
Ставь из реестра. Не пересоздавай по описанию, не подменяй похожим
компонентом из другой библиотеки и не переписывай под стиль проекта.
## 2. Что это
Выбор варианта с превью: у каждой строки картинка, а если ссылки нет — свой градиент с инициалами, оттенок которого детерминированно считается из названия.
Список вариантов, которые различаются внешним видом: шаблоны писем, темы оформления, обложки. У каждой строки превью 2.4rem, название и подпись со служебными данными. Если картинки нет, вместо неё встаёт градиент с инициалами, а его оттенок выводится из названия, поэтому один и тот же вариант всегда узнаётся по цвету. Ноль зависимостей, один файл, своя палитра.
## 3. Как использовать
import { Combobox014 } from "@/components/vibeui/combobox-014"
<Combobox014 label="Шаблон письма" defaultValue="Брошенная корзина" />
Полный список пропсов — в установленном файле.
## 4. Куда поставить
Это мелкий inline-компонент. Поставь его ровно туда, куда просил
пользователь, внутрь существующей разметки. Не создавай ради него
новую страницу, секцию или обёртку. Если на этом месте уже стоит похожий
контрол — замени его, а не добавляй второй.
Куда поставить: ___
(Эту строку заполняет пользователь. Если она осталась пустой — спроси,
а не угадывай.)
## 5. Сохранить как установлено
- локальную палитру --vibeui-combobox-014-* и не подменять её токенами вашей темы (bg-muted, text-muted-foreground и подобными)
- функцию hueOf: оттенок обязан быть детерминированным, случайный цвет менялся бы при каждом рендере
- пустой alt у картинки: имя варианта стоит рядом текстом, и повтор в alt даёт двойное чтение
- object-fit: cover и фиксированный размер превью — иначе разные пропорции картинок разъедут строки
- обрезку названия и подписи многоточием: длинное имя не должно ломать сетку строки
- обычный <img> вместо next/image: компонент обязан работать в любом React-проекте
- запасной градиент с инициалами: список без картинок должен оставаться различимым
## 6. Можно менять
- label — подпись поля
- placeholder — текст-подсказка в поле поиска
- options — варианты: имя, подпись и необязательная ссылка на картинку
- defaultValue — вариант, выбранный при первом рендере
- onSelect — обработчик выбранного имени
- accent — цвет подсветки выбранной строки
## 7. Правила
- Не грузите в превью полноразмерные картинки: строка 2.4rem, а трафик уйдёт настоящий.
- Не выводите оттенок из id, если человек видит название: цвет должен быть связан с тем, что на экране.
- Для сетки карточек этот вариант не годится: здесь именно список, где превью помогает узнать строку.
- Если у части вариантов картинки есть, а у части нет, смешение градиентов и фотографий выглядит грязно — выбирайте одно.
## 8. Проверка
- рендерится без ошибок в консоли;
- выглядит так же, как превью на странице VibeUI, откуда взята ссылка;
- если нет — ты изменил что-то из раздела 5, верни как было.Для разработчика
npx shadcn@latest add https://vibeui.ru/r/combobox-014.jsonhttps://vibeui.ru/r/combobox-014.jsonКомпонент самодостаточен: один файл, ноль зависимостей, собственная палитра в локальных переменных --vibeui-combobox-014-*. Клиентский: запрос и выбранное значение живут в useState. Строка списка — grid 2.4rem + 1fr: слева превью, справа название и подпись, обе строки текста обрезаются многоточием, поэтому длинное имя не ломает раскладку. Если у варианта есть src, рисуется обычный <img> с object-fit: cover и пустым alt (картинка декоративна, имя рядом текстом); если ссылки нет, показывается градиент, чей оттенок считает hueOf — детерминированный FNV-хэш по названию, поэтому вариант всегда одного цвета. Оттенок передаётся единственной инлайновой переменной --vibeui-combobox-014-hue: это динамическое значение, которое нельзя выразить статическим классом.
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
"use client"
import { useId, useMemo, useState } from "react"
import type { ComponentPropsWithoutRef, CSSProperties } from "react"
export type Combobox014Option = { name: string; hint?: string; src?: string }
export type Combobox014Props = Omit<
ComponentPropsWithoutRef<"div">,
"children" | "onSelect"
> & {
label?: string
placeholder?: string
options?: Combobox014Option[]
defaultValue?: string
onSelect?: (value: string) => void
accent?: string
}
// Идея компонента: когда варианты различаются внешним видом — шаблон письма,
// тема оформления, обложка, — текстовая строка бесполезна. Здесь у каждого
// варианта есть картинка, а если ссылки нет, вместо неё рисуется свой
// градиент с инициалами: оттенок считается из названия, поэтому вариант
// всегда узнаётся по одному и тому же пятну.
const STYLES = `
:where([data-vibeui-block="combobox-014"]){
--vibeui-combobox-014-bg:oklch(1 0 0);
--vibeui-combobox-014-fg:oklch(0.22 0.014 285);
--vibeui-combobox-014-muted:oklch(0.55 0.014 285);
--vibeui-combobox-014-border:oklch(0.9 0.008 285);
--vibeui-combobox-014-field:oklch(0.985 0.004 285);
--vibeui-combobox-014-soft:oklch(0.96 0.008 285);
--vibeui-combobox-014-accent:oklch(0.5 0.13 285);
--vibeui-combobox-014-accentsoft:oklch(0.94 0.04 285);
--vibeui-combobox-014-radius:0.625rem;
--vibeui-combobox-014-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-vibeui-block="combobox-014"]{
display:flex;flex-direction:column;gap:0.4rem;
width:100%;max-width:22rem;box-sizing:border-box;padding:0.875rem;
background:var(--vibeui-combobox-014-bg);
border:1px solid var(--vibeui-combobox-014-border);
border-radius:calc(var(--vibeui-combobox-014-radius) + 0.25rem);
color:var(--vibeui-combobox-014-fg);
font-family:var(--vibeui-combobox-014-font);
}
[data-vibeui-block="combobox-014"] label{font-size:0.8125rem;font-weight:600}
[data-vibeui-block="combobox-014"] input{
box-sizing:border-box;width:100%;height:2.4rem;padding:0 0.6rem;
border:1px solid var(--vibeui-combobox-014-border);
border-radius:var(--vibeui-combobox-014-radius);
background:var(--vibeui-combobox-014-field);
color:inherit;font:inherit;font-size:0.875rem;
}
[data-vibeui-block="combobox-014"] input::placeholder{color:var(--vibeui-combobox-014-muted)}
[data-vibeui-block="combobox-014"] input:focus-visible{
outline:2px solid var(--vibeui-combobox-014-accent);outline-offset:1px;border-color:transparent;
}
[data-vibeui-block="combobox-014"] [data-part="list"]{
margin:0;padding:0.2rem;list-style:none;display:flex;flex-direction:column;gap:0.15rem;
max-height:14rem;overflow:auto;
border:1px solid var(--vibeui-combobox-014-border);
border-radius:var(--vibeui-combobox-014-radius);
}
[data-vibeui-block="combobox-014"] [data-part="option"]{
appearance:none;cursor:pointer;font:inherit;width:100%;
display:grid;grid-template-columns:2.4rem 1fr;align-items:center;gap:0.55rem;
box-sizing:border-box;padding:0.35rem 0.4rem;
border:0;border-radius:0.5rem;background:transparent;color:inherit;text-align:left;
transition:background-color .16s ease;
}
[data-vibeui-block="combobox-014"] [data-part="option"]:hover{background:var(--vibeui-combobox-014-soft)}
[data-vibeui-block="combobox-014"] [data-part="option"]:focus-visible{
outline:2px solid var(--vibeui-combobox-014-accent);outline-offset:-2px;
}
[data-vibeui-block="combobox-014"] [data-part="option"][aria-selected="true"]{
background:var(--vibeui-combobox-014-accentsoft);
}
[data-vibeui-block="combobox-014"] [data-part="thumb"]{
display:flex;align-items:center;justify-content:center;
width:2.4rem;height:2.4rem;border-radius:0.45rem;overflow:hidden;flex:none;
background:linear-gradient(140deg,
oklch(0.86 0.09 var(--vibeui-combobox-014-hue,250)),
oklch(0.62 0.13 calc(var(--vibeui-combobox-014-hue,250) + 40)));
color:oklch(0.99 0.01 var(--vibeui-combobox-014-hue,250));
font-size:0.75rem;font-weight:700;letter-spacing:0.02em;
}
[data-vibeui-block="combobox-014"] [data-part="thumb"] img{
width:100%;height:100%;object-fit:cover;display:block;
}
[data-vibeui-block="combobox-014"] [data-part="body"]{min-width:0;display:flex;flex-direction:column}
[data-vibeui-block="combobox-014"] [data-part="name"]{
font-size:0.8125rem;font-weight:600;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
[data-vibeui-block="combobox-014"] [data-part="hint"]{
font-size:0.72rem;color:var(--vibeui-combobox-014-muted);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
[data-vibeui-block="combobox-014"] [data-part="empty"]{
margin:0;padding:0.6rem 0.5rem;font-size:0.8125rem;color:var(--vibeui-combobox-014-muted);
}
[data-vibeui-block="combobox-014"] [data-part="picked"]{
display:flex;align-items:center;gap:0.5rem;
padding-top:0.5rem;border-top:1px solid var(--vibeui-combobox-014-border);
font-size:0.8rem;color:var(--vibeui-combobox-014-muted);
}
[data-vibeui-block="combobox-014"] [data-part="picked"] b{color:var(--vibeui-combobox-014-fg)}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="combobox-014"] *{animation:none!important;transition:none!important}}
`
const TEMPLATES: Combobox014Option[] = [
{ name: "Приветственное письмо", hint: "Онбординг · 3 блока" },
{ name: "Брошенная корзина", hint: "Продажи · 2 блока" },
{ name: "Ежемесячный дайджест", hint: "Контент · 6 блоков" },
{ name: "Подтверждение заказа", hint: "Транзакционное · 1 блок" },
{ name: "Возврат клиента", hint: "Реактивация · 4 блока" },
{ name: "Отчёт по проекту", hint: "Внутреннее · 5 блоков" },
]
/** Детерминированный оттенок из названия: вариант всегда одного цвета. */
function hueOf(name: string) {
let hash = 2166136261
for (const symbol of name) {
hash ^= symbol.codePointAt(0) ?? 0
hash = Math.imul(hash, 16777619)
}
return ((hash >>> 0) % 12) * 30
}
function initialsOf(name: string) {
return name
.split(/\s+/)
.slice(0, 2)
.map((word) => word.charAt(0).toUpperCase())
.join("")
}
/**
* Выбор варианта с картинкой: превью слева, название и подпись справа.
* Один файл, ноль зависимостей, собственная палитра.
*/
export function Combobox014({
label = "Шаблон письма",
placeholder = "Найти шаблон",
options = TEMPLATES,
defaultValue = "Брошенная корзина",
onSelect,
accent,
className,
style,
...props
}: Combobox014Props) {
const id = useId()
const [query, setQuery] = useState("")
const [value, setValue] = useState(defaultValue)
const matches = useMemo(() => {
const needle = query.trim().toLowerCase()
return options.filter((option) =>
option.name.toLowerCase().includes(needle),
)
}, [query, options])
const picked = options.find((option) => option.name === value)
const palette = {
...(accent ? { "--vibeui-combobox-014-accent": accent } : null),
...style,
} as CSSProperties
return (
<>
<style href="vibeui-combobox-014" precedence="medium">
{STYLES}
</style>
<div
{...props}
data-vibeui-block="combobox-014"
className={className}
style={palette}
>
<label htmlFor={`${id}-input`}>{label}</label>
<input
id={`${id}-input`}
type="text"
role="combobox"
autoComplete="off"
placeholder={placeholder}
aria-expanded="true"
aria-controls={`${id}-list`}
aria-autocomplete="list"
value={query}
onChange={(event) => setQuery(event.target.value)}
/>
<ul
id={`${id}-list`}
role="listbox"
aria-label={label}
data-part="list"
>
{matches.length === 0 ? (
<li role="none">
<p data-part="empty">Шаблон не найден</p>
</li>
) : (
matches.map((option) => (
<li key={option.name} role="none">
<button
type="button"
role="option"
data-part="option"
aria-selected={option.name === value}
onClick={() => {
setValue(option.name)
onSelect?.(option.name)
}}
>
<span
data-part="thumb"
style={
{
"--vibeui-combobox-014-hue": hueOf(option.name),
} as CSSProperties
}
>
{option.src ? (
<img src={option.src} alt="" />
) : (
<span aria-hidden="true">{initialsOf(option.name)}</span>
)}
</span>
<span data-part="body">
<span data-part="name">{option.name}</span>
{option.hint ? (
<span data-part="hint">{option.hint}</span>
) : null}
</span>
</button>
</li>
))
)}
</ul>
<p data-part="picked" aria-live="polite">
Выбран шаблон: <b>{picked?.name ?? "не выбран"}</b>
</p>
</div>
</>
)
}