faq-widget
v1.0.2
Published
A simple FAQ widget built with React and Tailwind CSS.
Downloads
12
Readme
FAQ Widget
A customizable, embeddable FAQ widget built with React, Vite, and Tailwind CSS v4.
Easily add searchable, categorized FAQs to any website with a single JS and CSS file.
Features
- Easy Embedding: Add to any HTML page with a
<script>and<link>. - Customizable: Set FAQs, categories, title, and theme via data attributes.
- Modern Stack: Built with React 19, Vite, and Tailwind CSS v4.
- Auto Mount: Automatically renders on all
.faq-widgetcontainers. - Responsive & Accessible: Mobile-friendly and keyboard-navigable.
3. Customization
You can customize the widget using data attributes:
<div class='faq-widget' ...attributes></div>
attributes available are :
data-title: (string) Widget title.data-faqs: (JSON array) List of FAQ objects.data-categories: (JSON array) List of categories.data-theme:"light"or"dark".
Usage
Using CDN
To use the widget, add the following to your HTML <head> tag:
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/faq-widget.css">
<script src="https://unpkg.com/[email protected]/dist/faq-widget.umd.js"></script>and a container wtih faq-widget classname will give you the widget.
<div class='faq-widget'></div>
<div class='faq-widget' ...attributes></div> using npm
install the package using npm:
npm i faq-widgetYou can import after installing the package normally like this:
import 'faq-widget/dist/faq-widget.css'; // Import the CSS
import FAQWidget from 'faq-widget'; // Import the componentand then use it:
<FAQWidget
faqs={[
{ question: 'What is this widget?', answer: 'It is an FAQ widget.', category: 'General' },
{ question: 'How do I use it?', answer: 'Embed it into your site.', category: 'Technical' },
]}
categories={['General', 'Technical']}
title="FAQs"
theme="light"
/>Same other widgets are available as :
<div class='holiday-widget' ...attributes></div>
attributes are :
- year ="2025"
- country="US"
- api_key = "123455" (api key from https://calendarific.com/)