Home DocumentationGetting Started

Getting Started

Install FrogiUI and create your first AI-native component in under 5 minutes. No complex setup required.

Prerequisites

• React 18+ or Next.js 13+
• Node.js 16+ and npm/yarn
• Tailwind CSS (recommended)

Installation

Add FrogiUI to your React project

First Component

Create your first AI-native component

AI Integration

Connect with ChatGPT or Claude

1. Installation

Install FrogiUI using your preferred package manager:

Using npm

npm install frogiui

Using yarn

yarn add frogiui

Required: Tailwind CSS Setup

FrogiUI requires Tailwind CSS for styling. Add FrogiUI to your Tailwind config:

npm install -D tailwindcss
npx tailwindcss init

Update your tailwind.config.js:

module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/frogiui/dist/**/*.{js,ts,jsx,tsx}',
  ],
  // ... your config
}

Import FrogiUI styles in your main CSS file:

@import 'frogiui/dist/styles.css';
@tailwind base;
@tailwind components;
@tailwind utilities;

2. Your First AI-Native Component

Import and use a FrogiUI component. Notice how it includes semantic metadata that AI assistants can understand:

Basic Example

import { SimpleCenteredHero } from 'frogiui';

export default function HomePage() {
  return (
    <SimpleCenteredHero
      headline="Welcome to AI-Native Development"
      description="Build faster with components that understand AI assistants"
      primaryAction={{
        text: "Get Started",
        href: "/docs"
      }}
      secondaryAction={{
        text: "View Demo",
        href: "/demo"
      }}
    />
  );
}

What Makes This AI-Native?

• Semantic Props: AI understands what each prop does
• Context Awareness: Component knows it's a hero section
• Built-in Best Practices: Optimized for conversions automatically
• Natural Language Friendly: Props match how developers think

Advanced Example with Component IQ

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

export default function PricingPage() {
  return (
    <PricingThreeTiers
      title="Choose Your Plan"
      subtitle="Start free, scale as you grow"
      highlightTier="pro" // AI knows this optimizes conversions by 40%
      tiers={[
        {
          name: "Starter",
          price: "$0",
          description: "Perfect for side projects",
          features: ["5 components", "Community support"],
          cta: "Start Free"
        },
        {
          name: "Pro",
          price: "$29",
          description: "Most popular - 500+ teams",
          features: ["Unlimited components", "Priority support", "AI assistance"],
          cta: "Start Free Trial",
          popular: true
        },
        {
          name: "Enterprise", 
          price: "Custom",
          description: "For scaling companies",
          features: ["Everything in Pro", "Custom components", "Dedicated support"],
          cta: "Contact Sales"
        }
      ]}
    />
  );
}