Skip to Content
DocumentationGetting StartedQuick Start

Quick Start

Get started with Poodle in minutes! This guide will walk you through creating your first application with Poodle components.

Your First Component

After installing Poodle, let’s create a simple page with a button:

import { Button } from 'poodle'
 
export default function Page() {
  return (
    <div className="p-8">
      <h1 className="text-2xl font-bold mb-4">Hello Poodle!</h1>
      <Button onClick={() => alert('Hello!')}>
        Click me
      </Button>
    </div>
  )
}

Adding More Components

Let’s add more components to create a simple form:

import { Button, Input, Card } from 'poodle'
import { useState } from 'react'
 
export default function Page() {
  const [name, setName] = useState('')
 
  return (
    <div className="p-8">
      <Card className="max-w-md">
        <h1 className="text-2xl font-bold mb-4">Welcome!</h1>
 
        <Input
          placeholder="Enter your name"
          value={name}
          onChange={(e) => setName(e.target.value)}
          className="mb-4"
        />
 
        <Button onClick={() => alert(`Hello, ${name}!`)}>
          Submit
        </Button>
      </Card>
    </div>
  )
}

Using Variants

Poodle components support different variants and sizes:

import { Button } from 'poodle'
 
export default function Page() {
  return (
    <div className="flex gap-2">
      <Button variant="primary">Primary</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="ghost">Ghost</Button>
    </div>
  )
}

Component Composition

Poodle components work great together:

import { Card, Button, Input, Badge } from 'poodle'
 
export default function ProductCard() {
  return (
    <Card>
      <Badge variant="success">New</Badge>
      <h2 className="text-xl font-bold mt-2">Product Name</h2>
      <p className="text-gray-600 my-2">Product description goes here</p>
      <Input type="number" placeholder="Quantity" className="mb-2" />
      <Button variant="primary" className="w-full">
        Add to Cart
      </Button>
    </Card>
  )
}

Next Steps

Now that you’ve created your first components, explore more:

Common Patterns

Form Handling

import { Button, Input, Card } from 'poodle'
import { useState } from 'react'
 
export default function LoginForm() {
  const [formData, setFormData] = useState({
    email: '',
    password: ''
  })
 
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    console.log('Form submitted:', formData)
  }
 
  return (
    <Card className="max-w-md mx-auto">
      <form onSubmit={handleSubmit} className="space-y-4">
        <Input
          type="email"
          placeholder="Email"
          value={formData.email}
          onChange={(e) => setFormData({ ...formData, email: e.target.value })}
          required
        />
        <Input
          type="password"
          placeholder="Password"
          value={formData.password}
          onChange={(e) => setFormData({ ...formData, password: e.target.value })}
          required
        />
        <Button type="submit" variant="primary" className="w-full">
          Sign In
        </Button>
      </form>
    </Card>
  )
}

Loading States

import { Button } from 'poodle'
import { useState } from 'react'
 
export default function AsyncButton() {
  const [loading, setLoading] = useState(false)
 
  const handleClick = async () => {
    setLoading(true)
    await new Promise(resolve => setTimeout(resolve, 2000))
    setLoading(false)
  }
 
  return (
    <Button onClick={handleClick} disabled={loading}>
      {loading ? 'Loading...' : 'Click Me'}
    </Button>
  )
}
InstallationConfiguration