Interactive widgets provide user-facing actions, forms, and dynamic elements.
Buttons and CTAs
| Widget | Type | Description |
|---|---|---|
| Button | button |
Styled button with 4 variants (primary, secondary, outline, ghost), 3 sizes, custom colors, and hover colors |
| Call to Action | call-to-action |
CTA section with heading, description, and button |
| CTA Banner | cta-banner |
Full-width call-to-action banner |
Forms
| Widget | Type | Description |
|---|---|---|
| Contact Form | contact-form |
Contact form with configurable fields |
| Newsletter | newsletter |
Email subscription form |
| Login | login |
Authentication form |
| Search | search |
Search input with configurable action |
Pricing
| Widget | Type | Description |
|---|---|---|
| Pricing Table | pricing-table |
Multi-tier pricing comparison |
| Pricing Toggle | pricing-toggle |
Monthly/annual pricing switcher |
Interactive elements
| Widget | Type | Description |
|---|---|---|
| Countdown | countdown |
Countdown timer to a target date |
| Modal | modal |
Button-triggered modal dialog |
| Flip Card | flip-card |
Card with interactive front/back flip |
| Content Toggle | content-toggle |
Show/hide content sections |
| Back to Top | back-to-top |
Scroll-to-top button |
| Cookie Consent | cookie-consent |
GDPR cookie consent banner |
Social
| Widget | Type | Description |
|---|---|---|
| Share Buttons | share-buttons |
Social media sharing buttons |
| Social Follow | social-follow |
Social media profile links |
| File Download | file-download |
Downloadable file with button |
Button widget details
The Button widget is one of the most configurable interactive widgets:
Content tab:
- Label text
- URL
- Open in new tab toggle
- Style:
primary,secondary,outline,ghost - Size:
sm,md,lg
Design tab (in addition to shared fields):
- Background color
- Hover background color
- Text color
- Hover text color
Contributors
Thank you to everyone who has contributed to this package. Every pull request, bug report, and idea makes a difference.
