• Component: PricingTable

  Purpose Displays different pricing plans or tiers side-by-side, usually in columns, making it easy for users to compare options. When to Use On a pricing page. On a landing page to show available subscription options. How to Use (Options / Props) This component takes a single plans prop, which needs to be a list (an "array") of plan details.Few readers

• Component: VideoEmbed

  Purpose Easily embeds a video player (e.g., from YouTube or Vimeo) into your content. When to Use Showing product demos. Including tutorials or walkthroughs. Embedding webinars or presentations. How to Use (Options / Props)Few readers

• Component: Testimonial

  Purpose Displays a quote from a customer, user, or expert to build trust and social proof. When to Use On landing pages to show customer satisfaction. On product pages to highlight positive feedback. Anywhere you want to showcase endorsements. How to Use (Options / Props)Few readers

• Component: Button

  Purpose Creates a clickable button, typically used for links or calls to action. When to Use Linking to other pages on your site (e.g., "Learn More", "Contact Us"). Linking to external websites. Highlighting the main action within a CallToAction component. Creating eye-catching call-to-action elements in your content. How to Use (Options / Props) You add options (called "props") inside the opening tag <Button ... >. The text you want inside the button goes between thFew readers

• Component: GifEmbed

  Purpose Displays an animated GIF image, similar to a regular image but potentially with specific styling or handling for GIFs. When to Use Showing short animations or screen recordings. Adding visual interest or humor (use sparingly!). Illustrating a quick process visually. How to Use (Options / Props)Few readers

• Component: CallToAction (CTA)

  Purpose Creates a distinct block designed to grab attention and encourage the user to take a specific action (like signing up, learning more, etc.). Usually contains text and one or two buttons. When to Use At the end of a page or section to prompt the next step. Highlighting a key offer or benefit. Driving sign-ups, downloads, or contact requests. How to Use (Options / Props)Few readers

• Component: FeatureList

  Purpose Presents a list of key features, benefits, or items in a visually appealing way, often more structured than a simple bulleted list. (This version uses text-based descriptions). When to Use Highlighting product or service features on a landing page. Summarizing key benefits. Listing steps in a process (if simple). How to Use (Options / Props) This component takes a single items prop, which needs to be a list (an "array") of features.Few readers

• Component: Card

  Purpose Displays information in a self-contained box, often with an image, title, description, and a link. Good for summaries or previews. When to Use Previewing blog posts or articles. Highlighting key features or services briefly. Showcasing team members or portfolio items. Grouping related links or resources. How to Use (Options / Props) The main description or content goes between the opening <Cardand closing </Cardtags.Few readers

• Component: Accordion

  Purpose Creates a list of collapsible sections, often used for Frequently Asked Questions (FAQs) or organizing detailed information concisely. Users click a title to reveal the content. When to Use Displaying FAQs. Hiding detailed steps or explanations until needed. Organizing complex information into manageable chunks. How to Use (Options / Props) This component takes a single items prop, which needs to be a list (an "array") of questions and answers.Few readers

• Component: Alert

  Purpose Displays a highlighted message box to draw attention to important information. When to Use Providing tips or extra information (info). Warning users about potential issues (warning). Confirming a successful action (success). Highlighting errors or critical problems (error). How to Use (Options / Props) The main message goes between the opening <Alertand closing </Alerttags.Few readers