Getting Started
Components
Text Animations
Backgrounds
Installation
pnpm dlx shadcn@latest add @gammaui/support-box
Usage
import { SupportBox } from "@/components/ui/support-box"<SupportBox
items={[
{
title: "FAQ",
description: "Frequently Asked Questions",
icon: "❓",
onPress: () => console.log("FAQ clicked"),
},
{
title: "Contact Support",
description: "Reach out to our support team",
icon: "📞",
onPress: () => console.log("Contact clicked"),
},
]}
/>Examples
Collapsed State
The box shows only the title and expands on click.
<SupportBox title="Need Help?" items={supportItems} />Expanded State
Displays the full menu with interactive items.
<SupportBox
title="Support"
items={supportItems}
expandedWidth={350}
expandedHeight={400}
/>Dark Mode Styling
<SupportBox
items={supportItems}
containerClassName="bg-gray-900 border-gray-700"
titleClassName="text-white"
itemClassName="text-gray-200"
/>Custom Styling
<SupportBox
items={supportItems}
bgColor="bg-blue-50 dark:bg-blue-900"
borderColor="border-blue-300 dark:border-blue-700"
/>API Reference
SupportBox
A collapsible support/help box with menu items.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Need Help?" | The main title displayed on the box |
| items | MenuItem[] | [] | Array of menu items with title, description, icon, onPress |
| collapsedWidth | number | 120 | Width when collapsed |
| collapsedHeight | number | 40 | Height when collapsed |
| expandedWidth | number | 300 | Width when expanded |
| expandedHeight | number | 320 | Height when expanded |
| className | string | "" | Custom wrapper class |
| containerClassName | string | 'bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700' | Box container styling |
| titleClassName | string | 'text-gray-800 dark:text-gray-100' | Title text styling |
| itemClassName | string | 'text-gray-800 dark:text-gray-100' | Item text styling |
| bgColor | string | "" | Custom background color |
| borderColor | string | "" | Custom border color |
MenuItem
| Prop | Type | Description |
|---|---|---|
| title | string | Item title |
| description | string | Item description |
| icon | ReactNode | Item icon |
| onPress | () => void | Click handler for the item |