VibeUI

Display

Gradient Icon Tile

Градиентная плитка под иконку, где вся пара цветов считается от одного угла оттенка: рассогласовать градиент случайным подбором нельзя.

  • icontile
  • gradient
  • icon
  • hue

Превью

1440pxHost theme

Использовать с AI

  1. 1. Скопируйте ссылку.
  2. 2. Напишите агенту своими словами и вставьте её в предложение.
  3. 3. Агент откроет ссылку и поставит компонент из registry.

размести это в шапке: https://vibeui.ru/c/icontile-002

Показать полную инструкцию

То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.

# Установка и размещение «icontile-002» (Gradient Icon Tile) из VibeUI

## 1. Сначала установка — не пропускай, не пересоздавай
Выполни эту команду до того, как писать код:
npx shadcn@latest add https://vibeui.ru/r/icontile-002.json

Registry item: https://vibeui.ru/r/icontile-002.json
Ставится в: components/vibeui/icontile-002.tsx (точный путь следует алиасам components.json этого проекта).
npm-зависимости: нет.
Registry-зависимости: нет.

Ставь из реестра. Не пересоздавай по описанию, не подменяй похожим
компонентом из другой библиотеки и не переписывай под стиль проекта.

## 2. Что это
Градиентная плитка под иконку, где вся пара цветов считается от одного угла оттенка: рассогласовать градиент случайным подбором нельзя.

Градиентная плитка под иконку: оба края градиента считаются от hue, размер — от одной переменной. Ноль зависимостей, один файл, клиентского JS нет.

## 3. Как использовать
import { Icontile002 } from "@/components/vibeui/icontile-002"

<Icontile002 glyph="◆" hue={262} size="md" label="Проекты" />

Полный список пропсов — в установленном файле.

## 4. Куда поставить
Это мелкий inline-компонент. Поставь его ровно туда, куда просил
пользователь, внутрь существующей разметки. Не создавай ради него
новую страницу, секцию или обёртку. Если на этом месте уже стоит похожий
контрол — замени его, а не добавляй второй.

Куда поставить: ___
(Эту строку заполняет пользователь. Если она осталась пустой — спроси,
а не угадывай.)

## 5. Сохранить как установлено
- локальную палитру --vibeui-icontile-002-* и не подменять её токенами вашей темы
- вывод второго края градиента из hue: разведённые вручную цвета рассогласуются в первом же ряду плиток
- inset-тень вместо border — border меняет размер плитки и сбивает сетку иконок
- кегль знака как долю размера: иначе на sm знак упирается в края, а на lg теряется
- aria-hidden без label: декоративная плитка не должна объявляться скринридером
- светлый знак поверх градиента: тёмный на насыщенном фоне теряет контраст

## 6. Можно менять
- знак внутри плитки через glyph
- цвет плитки через hue: одно число двигает весь градиент
- размер через size: sm, md или lg
- радиус через переменную --vibeui-icontile-002-radius

## 7. Правила
- Знак — символ, а не svg: для иконочного набора подставьте свой элемент внутрь.
- oklch и calc в цветах требуют актуального браузера; в старых плитка останется без фона.
- Слишком длинный glyph выйдет за края: плитка рассчитана на один-два символа.
- Не выносите CSS-переменные в globals.css: компонент обязан оставаться одним файлом.

## 8. Проверка
- рендерится без ошибок в консоли;
- выглядит так же, как превью на странице VibeUI, откуда взята ссылка;
- если нет — ты изменил что-то из раздела 5, верни как было.

Для разработчика

npx shadcn@latest add https://vibeui.ru/r/icontile-002.json
https://vibeui.ru/r/icontile-002.json

Серверный компонент, хуков нет. Оба края градиента выведены из переменной --vibeui-icontile-002-hue: второй берётся сдвигом на 32° по тому же кругу oklch, поэтому пара всегда согласована, а перекрасить плитку можно одним числом. Внутренняя светлая рамка сделана inset-тенью, а не border: border съедал бы размер плитки и сбивал сетку иконок. Размер задаётся data-size и одной переменной, от которой считаются радиус и кегль знака. Плитка декоративна: без label она получает aria-hidden, с label — role=img и доступное имя.

Исходник компонента

Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.

import type { ComponentPropsWithoutRef, CSSProperties } from "react"

export type Icontile002Props = Omit<
  ComponentPropsWithoutRef<"span">,
  "children" | "color"
> & {
  glyph?: string
  hue?: number
  size?: "sm" | "md" | "lg"
  label?: string
}

// Идея компонента: градиентная плитка, у которой весь цвет считается от
// одного числа — угла оттенка. Второй край градиента берётся сдвигом на 32°
// по тому же кругу, поэтому пара всегда согласована и её нельзя испортить
// случайным подбором. Светлая рамка внутри (inset-тень) отделяет плитку от
// тёмного фона: без неё градиент на тёмной подложке теряет границу.
const STYLES = `
:where([data-vibeui-block="icontile-002"]){
--vibeui-icontile-002-hue:262;
--vibeui-icontile-002-size:2.75rem;
--vibeui-icontile-002-radius:0.875rem;
--vibeui-icontile-002-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
/* Оба края градиента считаются от одного угла: пару нельзя рассогласовать. */
[data-vibeui-block="icontile-002"]{
display:inline-flex;align-items:center;justify-content:center;flex:none;
box-sizing:border-box;
width:var(--vibeui-icontile-002-size);height:var(--vibeui-icontile-002-size);
border-radius:var(--vibeui-icontile-002-radius);
background:linear-gradient(145deg,
oklch(0.72 0.17 var(--vibeui-icontile-002-hue)) 0%,
oklch(0.5 0.19 calc(var(--vibeui-icontile-002-hue) + 32)) 100%);
box-shadow:inset 0 0 0 1px oklch(1 0 0 / 28%);
color:oklch(0.99 0.01 var(--vibeui-icontile-002-hue));
font-family:var(--vibeui-icontile-002-font);
font-size:calc(var(--vibeui-icontile-002-size) * 0.42);
font-weight:650;line-height:1;
}
[data-vibeui-block="icontile-002"][data-size="sm"]{--vibeui-icontile-002-size:2rem;--vibeui-icontile-002-radius:0.625rem}
[data-vibeui-block="icontile-002"][data-size="lg"]{--vibeui-icontile-002-size:3.5rem;--vibeui-icontile-002-radius:1.125rem}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="icontile-002"]{animation:none!important;transition:none!important}}
`

/**
 * Градиентная плитка под иконку: обе точки градиента считаются от hue.
 * Один файл, ноль зависимостей, собственная палитра.
 */
export function Icontile002({
  glyph = "◆",
  hue = 262,
  size = "md",
  label,
  className,
  style,
  ...props
}: Icontile002Props) {
  const palette = {
    "--vibeui-icontile-002-hue": hue,
    ...style,
  } as CSSProperties

  return (
    <>
      <style href="vibeui-icontile-002" precedence="medium">
        {STYLES}
      </style>
      <span
        {...props}
        data-vibeui-block="icontile-002"
        data-size={size}
        role={label ? "img" : undefined}
        aria-label={label}
        aria-hidden={label ? undefined : true}
        className={className}
        style={palette}
      >
        {glyph}
      </span>
    </>
  )
}