A shared folder with AI prompts and code snippets
From workspace: HeroUI Chat
Team: Main
Total snippets: 5
5 snippets
Customize HeroUI Input components with brand colors and padding via Tailwind classes.
Style a HeroUI Input component. Use: - Border color: border-indigo-500 - Focus ring: focus:ring-indigo-500 - Padding: py-2 px-3 - Rounded corners: rounded-md - Font: text-sm text-gray-900
Define custom button variants using `tailwind-variants` to extend HeroUI’s Button styles.
Create custom button variants using tailwind-variants. Base: - Default HeroUI button with padding and font Add: - primary (bg-blue-500 text-white hover:bg-blue-600) - outline (border border-gray-300 bg-white text-gray-900) - danger (bg-red-500...
Apply HeroUI-supported dark mode styling using Tailwind's `dark:` variants for consistent UI across themes.
Style a HeroUI Card component with dark mode support. Use: - Tailwind `dark:` class support - Light theme: bg-white text-gray-900 - Dark theme: dark:bg-gray-900 dark:text-white - Padding and rounded corners
Use Tailwind responsive classes with HeroUI Card to adapt to screen sizes.
Style a responsive HeroUI Card component. Requirements: - Use grid or flex layout - Responsive padding: p-4 md:p-6 - Set max-w-screen-sm for small cards - Ensure text wraps cleanly and has spacing between sections
Extend HeroUI’s Alert component with `tailwind-variants` to define multiple alert styles.
Create styled variants for HeroUI Alert component. Variants: - info (bg-blue-100 text-blue-900) - success (bg-green-100 text-green-900) - warning (bg-yellow-100 text-yellow-900) - error (bg-red-100 text-red-900) Use tailwind-variants to...