Интеграция компонента из 21st.dev или похожей библиотеки в проект на shadcn, Tailwind и TypeScript: зависимости, пути, ассеты, вопросы.
Замените фрагменты в квадратных скобках своими данными и вставьте промпт в чат с ИИ.
Значения сразу появятся в превью, коде и при копировании.
Ты — frontend-разработчик. Нужно встроить готовый React-компонент в существующий проект.
Проект должен поддерживать:
- структуру проекта shadcn;
- Tailwind CSS;
- TypeScript.
Если чего-то нет, сначала дай инструкцию, как настроить проект через shadcn CLI, установить Tailwind или TypeScript.
Код компонента:
[вставь код компонента]
Шаги:
1. Определи папки по умолчанию для компонентов и стилей. Если компоненты лежат не в /components/ui, объясни, почему эту папку стоит создать, и создай её.
2. Помести компонент в /components/ui.
3. Разбери структуру компонента: все зависимости, аргументы (props) и внутреннее состояние.
4. Найди нужные провайдеры контекста и хуки и подключи их.
5. Установи внешние зависимости — покажи команды.
6. Если компоненту нужны изображения, подставь стоковые фото с Unsplash, в существовании которых ты уверен.
7. Для иконок и логотипов используй lucide-react.
8. Покажи пример использования компонента на странице.
Прежде чем закончить, ответь (или спроси меня):
- Какие данные и props будут передаваться?
- Есть ли требования к управлению состоянием?
- Нужны ли свои ассеты — изображения, иконки?
- Как компонент должен вести себя на разных экранах?
- Где в приложении его лучше разместить?```text Ты — frontend-разработчик. Нужно встроить готовый React-компонент в существующий проект. Проект должен поддерживать: - структуру проекта shadcn; - Tailwind CSS; - TypeScript. Если чего-то нет, сначала дай инструкцию, как настроить проект через shadcn CLI, установить Tailwind или TypeScript. Код компонента: [вставь код компонента] Шаги: 1. Определи папки по умолчанию для компонентов и стилей. Если компоненты лежат не в /components/ui, объясни, почему эту папку стоит создать, и создай её. 2. Помести компонент в /components/ui. 3. Разбери структуру компонента: все зависимости, аргументы (props) и внутреннее состояние. 4. Найди нужные провайдеры контекста и хуки и подключи их. 5. Установи внешние зависимости — покажи команды. 6. Если компоненту нужны изображения, подставь стоковые фото с Unsplash, в существовании которых ты уверен. 7. Для иконок и логотипов используй lucide-react. 8. Покажи пример использования компонента на странице. Прежде чем закончить, ответь (или спроси меня): - Какие данные и props будут передаваться? - Есть ли требования к управлению состоянием? - Нужны ли свои ассеты — изображения, иконки? - Как компонент должен вести себя на разных экранах? - Где в приложении его лучше разместить? ```
{
"messages": [
{
"role": "user",
"content": "Ты — frontend-разработчик. Нужно встроить готовый React-компонент в существующий проект.\n\nПроект должен поддерживать:\n- структуру проекта shadcn;\n- Tailwind CSS;\n- TypeScript.\n\nЕсли чего-то нет, сначала дай инструкцию, как настроить проект через shadcn CLI, установить Tailwind или TypeScript.\n\nКод компонента:\n[вставь код компонента]\n\nШаги:\n1. Определи папки по умолчанию для компонентов и стилей. Если компоненты лежат не в /components/ui, объясни, почему эту папку стоит создать, и создай её.\n2. Помести компонент в /components/ui.\n3. Разбери структуру компонента: все зависимости, аргументы (props) и внутреннее состояние.\n4. Найди нужные провайдеры контекста и хуки и подключи их.\n5. Установи внешние зависимости — покажи команды.\n6. Если компоненту нужны изображения, подставь стоковые фото с Unsplash, в существовании которых ты уверен.\n7. Для иконок и логотипов используй lucide-react.\n8. Покажи пример использования компонента на странице.\n\nПрежде чем закончить, ответь (или спроси меня):\n- Какие данные и props будут передаваться?\n- Есть ли требования к управлению состоянием?\n- Нужны ли свои ассеты — изображения, иконки?\n- Как компонент должен вести себя на разных экранах?\n- Где в приложении его лучше разместить?"
}
]
}