August
UIPlus

Quick Start

Get started with AugustUI by learning the basics and creating your first component.

Quick Start

This guide will help you get started with AugustUI by walking you through the creation of a simple application.

Basic Usage

After installing AugustUI, you can start importing and using components in your application:

import { Button } from '@augustui/react'
 
export default function MyApp() {
  return (
    <Button variant="primary">
      Click me
    </Button>
  )
}

Creating a Simple Form

Let's create a simple login form using AugustUI components:

import { Button, Input, Card, Form } from '@augustui/react'
 
export default function LoginForm() {
  const handleSubmit = (event) => {
    event.preventDefault()
    // Handle form submission
  }
 
  return (
    <Card className="max-w-md mx-auto p-6">
      <Form onSubmit={handleSubmit}>
        <h2 className="text-2xl font-bold mb-4">Login</h2>
        
        <div className="space-y-4">
          <Input
            label="Email"
            type="email"
            placeholder="Enter your email"
            required
          />
          
          <Input
            label="Password"
            type="password"
            placeholder="Enter your password"
            required
          />
          
          <Button type="submit" className="w-full">
            Sign In
          </Button>
        </div>
      </Form>
    </Card>
  )
}

Using Themes

AugustUI components support theming out of the box. You can customize the appearance of components using the theme provider:

import { ThemeProvider } from '@augustui/react'
 
const theme = {
  colors: {
    primary: '#0070f3',
    secondary: '#7928ca',
  },
  // ... other theme values
}
 
export default function App() {
  return (
    <ThemeProvider theme={theme}>
      {/* Your app content */}
    </ThemeProvider>
  )
}

Next Steps

Now that you've learned the basics, you can: