FAQ Monochrome
Elegant monochrome FAQ section with theme toggle and animated effects
FAQ Monochrome
An elegant monochrome FAQ section with smooth animations, theme toggle, and sophisticated visual effects. Features an animated intro badge with beam and pulse effects, card hover glows, and seamless dark/light mode switching.
Signal FAQ
Questions
Focus on the signal, not the noise.
Everything you need to know about partnering with our team, condensed into calm monochrome clarity.
Install the component using the shadcn CLI:
npx shadcn@latest add @uimix/faq-monochromeThis will automatically add the component to your project.
Copy and paste the following code into your project:
Loading source…
Make sure you have the required animations in your tailwind.config.js:
module.exports = {theme: { extend: {}}}Add the required classes to your global stylesheet:
/* All animations are injected dynamically via JavaScript */Usage
import FAQMonochrome from '@/registry/default/faq-monochrome'
export default function Page() {
return <FAQMonochrome />
}Features
- •Theme Toggle - Dynamic dark/light mode with smooth transitions
- •Animated Intro Badge - Spinning beam and pulsing effects on the intro label
- •Card Hover Effects - Interactive glow that follows cursor position
- •Smooth Transitions - Hardware-accelerated animations with blur effects
- •Accessible - Proper ARIA labels and keyboard navigation
- •Customizable - Easy to modify FAQ content and styling