Shadcn UI Help Block
Help2 is a single-column help center section with three stacked areas: a search input at the top, an accordion FAQ in the middle, and a contact options panel at the bottom. The search input has a magnifying glass icon and filters FAQ items in real-time as the user types. Each accordion item displays a question that expands to reveal the answer. The contact panel shows three buttons for live chat, email, and phone support.
Light background throughout with no borders on the main container. The search input has an inset icon. The accordion has clean divider lines between items. The contact panel has rounded corners with semi-transparent muted fill, and the buttons use outline styling with white backgrounds. Generous vertical spacing between the three sections.
Functional and understated with a standard help center layout. The search-first approach puts self-service ahead of contacting support. Moderate complexity due to the interactive search filtering and accordion, but the visual design stays close to shadcn defaults. Requires FAQ content with questions and answers.
Dependencies
| Package | Type |
|---|---|
| lucide-react | NPM |
| react | NPM |
accordion @shadcn | Registry |
button @shadcn | Registry |
input @shadcn | Registry |