Get Started
AI-Ready
HomeDocumentationUsing Components

Using Components

Learn how to effectively use FrogiUI components to build beautiful, functional interfaces faster than ever before.

Quick Start

Copy, paste, customize. FrogiUI components are designed to be ready-to-use with sensible defaults and easy customization.

In This Guide

Component Library

Browse and choose the right components

Props & Options

Configure components for your needs

Styling & Customization

Customize appearance and behavior

AI Integration

Use components with AI assistants

Component Library

FrogiUI provides 200+ components organized by purpose. Each component is designed for specific use cases with built-in best practices.

Marketing

  • • Hero sections (8 variants)
  • • Feature showcases
  • • Pricing tables
  • • Testimonials
  • • Newsletter signups
Browse Marketing

Application UI

  • • Forms & inputs
  • • Navigation menus
  • • Data tables
  • • Modals & overlays
  • • Feedback components
Browse Application

E-commerce

  • • Product catalogs
  • • Shopping carts
  • • Checkout flows
  • • Product reviews
  • • Order tracking
Browse E-commerce

Choosing Components

Not sure which component to use? Describe what you need to ChatGPT or Claude, and they'll recommend the perfect component for your use case.

Example prompt:
"I need a pricing section for my SaaS with 3 tiers and annual/monthly toggle"

Props & Options

FrogiUI components use intuitive props that match how you naturally think about UI elements.

Common Patterns

Actions & CTAs

primaryAction={{
  text: "Get Started",
  href: "/signup"
}}

secondaryAction={{
  text: "Learn More",
  href: "/docs"
}}

Content Structure

title="Build faster apps"
description="Save weeks of development time"
badge="New Feature"
announcement="Version 2.0 is here"

Real Example: Hero Component

import { HeroSimpleCentered } from '@frogiui/react';

<HeroSimpleCentered
  announcement={{
    text: "🎉 New AI features available",
    href: "/updates"
  }}
  title="Build AI-powered apps faster"
  description="Skip the complexity. Use components that work perfectly with ChatGPT and Claude."
  primaryAction={{
    text: "Start Building",
    href: "/docs/getting-started"
  }}
  secondaryAction={{
    text: "View Components",
    href: "/components"
  }}
/>
Required Props:
title - Main headline text
Optional Props:
announcement - Top banner with text and link
description - Supporting text below title
primaryAction - Main call-to-action button
secondaryAction - Secondary action link

Styling & Customization

Customize components to match your brand while maintaining the optimized structure.

Theme Customization

// Override default colors
<PricingThreeTiers
  className="bg-blue-50"
  accentColor="blue"
  tiers={[...]}
/>

// Custom button styles
<HeroSimpleCentered
  primaryAction={{
    text: "Custom Button",
    href: "/action",
    className: "bg-purple-600 hover:bg-purple-700"
  }}
/>

Colors

Use className or accentColor props to customize colors

Typography

Override fonts with Tailwind classes or CSS custom properties

Layout

Adjust spacing, alignment, and responsive behavior

Best Practice

Start with default styles, then customize only what you need. The default configurations are optimized for conversion and accessibility.

AI Integration

FrogiUI components work seamlessly with AI assistants. Here's how to get the most out of AI-powered development.

Natural Language Requests

Instead of studying documentation, just ask:
"Create a pricing page with 3 tiers, the middle one highlighted, with annual/monthly toggle"
AI will respond with:
✓ Correct component (PricingThreeTiers)
✓ Proper configuration (highlightTier="middle")
✓ Toggle implementation
✓ Optimized copy suggestions

Good Prompts

  • ✓ "Build a hero for my SaaS product"
  • ✓ "Create a feature section highlighting benefits"
  • ✓ "Add testimonials with customer photos"
  • ✓ "Build a newsletter signup with incentive"

Avoid

  • ✗ "Use the HeroSimpleCentered component"
  • ✗ "Import from @frogiui/react"
  • ✗ "Set the primaryAction prop to..."
  • ✗ Technical implementation details

AI Assistant Setup

ChatGPT

Works out of the box. Just mention FrogiUI in your prompts.

Setup Guide

Claude MCP

Install our MCP server for direct component access.

MCP Setup

Next Steps

Building Apps

Step-by-step guides to build complete applications with FrogiUI components.

Start Building

Recipes & Examples

Copy-paste solutions for common UI patterns and complete page layouts.

Browse Recipes

Component Library

Explore all available components with live previews and code examples.

Browse Library