Glass FAQ Accordion: Premium Sections Component by Alpheratz

A highly customizable, animated FAQ component. Organize questions into multiple sections, choose from Light/Dark presets, or create a fully custom theme. Features smooth spring animations, glassmorphism blur, and interactive SVG icons.

About this Component

Streamline your customer support and improve user experience with the Glass FAQ Accordion. This premium Framer component allows you to build beautifully structured, interactive Frequently Asked Questions sections in minutes. Organize your content into logical categories (like "Company", "Pricing", "Features") to help users find answers faster.

Built with Framer Motion, it features buttery-smooth spring animations when toggling answers and satisfying hover effects. It embraces modern design trends with a built-in glassmorphism (backdrop blur) effect. You can instantly switch between professionally designed Light and Dark themes, or select "Custom" to unlock precise color controls for text, borders, backgrounds, and icons to match your brand identity perfectly.

Functions (Key Features):

🗂️ Multi-Section Support: Group questions under customizable category titles (e.g., General, Shipping).
🎨 Smart Theming: 1-click Light and Dark mode presets, plus a "Custom" mode for full granular color control.
🧊 Glassmorphism: Built-in adjustable backdrop blur for a modern, frosted-glass container effect.
⚡ Fluid Animation: Uses spring physics for natural, high-quality accordion expand/collapse transitions.
🎛️ Granular Layout: Complete control over padding, gaps, border radiuses, and text alignment for perfect spacing.
🔄 Custom Icons: Choose between Plus, Chevron, or Arrow icons, and position them on the left or right.

How to Use:

Copy & Paste: Copy the component from the Layers panel and paste it directly into your Framer project.
Content: In the properties panel, edit the Sections array. Add a title for the section, then add your Questions and Answers inside it.
Theme: Choose between the preset Light or Dark themes. To use your own brand colors, select Custom.
Custom Colors: If using Custom mode, set the background colors, text colors, and border colors for both the container and the individual question/answer blocks.
Styling: Adjust the Radius, Blur, and Padding to match your site's aesthetic. Select your preferred Icon Type (Plus/Chevron/Arrow).