> ## Documentation Index
> Fetch the complete documentation index at: https://docs.thehuxdesign.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Quickstart

> Build your first Hux UI app in 5 minutes

## Quick Setup

Get up and running with Hux UI in just a few minutes. This guide will help you create a simple Flutter app using Hux UI components.

<Note>
  **For Designers**: Check out the [Figma library](https://www.figma.com/community/file/1541197128732135637/the-hux-ui) to explore all Hux UI components visually and use them in your design workflow.
</Note>

<Steps>
  <Step title="Install Hux UI">
    Add Hux UI to your Flutter project:

    ```bash theme={null}
    flutter pub add hux
    ```
  </Step>

  <Step title="Configure Themes">
    Set up Hux UI themes in your `main.dart`:

    ```dart main.dart theme={null}
    import 'package:flutter/material.dart';
    import 'package:hux/hux.dart';

    void main() {
      runApp(MyApp());
    }

    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Hux UI Quickstart',
          theme: HuxTheme.lightTheme,
          darkTheme: HuxTheme.darkTheme,
          home: QuickstartPage(),
        );
      }
    }
    ```
  </Step>

  <Step title="Build Your First UI">
    Create a simple page with Hux UI components:

    ```dart theme={null}
    class QuickstartPage extends StatefulWidget {
      @override
      _QuickstartPageState createState() => _QuickstartPageState();
    }

    class _QuickstartPageState extends State<QuickstartPage> {
      bool _isLoading = false;
      final _textController = TextEditingController();
      
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(title: Text('Hux UI Quickstart')),
          body: Padding(
            padding: EdgeInsets.all(16),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                HuxCard(
                  title: 'Welcome to Hux UI',
                  subtitle: 'Modern Flutter components',
                  child: Text('This is your first Hux UI app!'),
                ),
                SizedBox(height: 20),
                
                HuxInput(
                  label: 'Enter your name',
                  hint: 'Type here...',
                  controller: _textController,
                  prefixIcon: Icon(FeatherIcons.user),
                ),
                SizedBox(height: 20),
                
                HuxButton(
                  onPressed: _isLoading ? null : () {
                    setState(() { _isLoading = true; });
                    Future.delayed(Duration(seconds: 2), () {
                      setState(() { _isLoading = false; });
                    });
                  },
                  isLoading: _isLoading,
                  child: Text('Get Started'),
                  variant: HuxButtonVariant.primary,
                ),
                SizedBox(height: 20),
                
                Row(
                  children: [
                    Expanded(
                      child: HuxButton(
                        onPressed: () {},
                        child: Text('Secondary'),
                        variant: HuxButtonVariant.secondary,
                      ),
                    ),
                    SizedBox(width: 12),
                    Expanded(
                      child: HuxButton(
                        onPressed: () {},
                        child: Text('Outline'),
                        variant: HuxButtonVariant.outline,
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
        );
      }
    }
    ```
  </Step>

  <Step title="Run Your App">
    Start your Flutter app to see Hux UI in action:

    ```bash theme={null}
    flutter run
    ```
  </Step>
</Steps>

## What You Built

Congratulations! You just created a Flutter app with:

* **HuxCard** - A beautiful card container with title and subtitle
* **HuxInput** - An enhanced text input with icon and validation support
* **HuxDateInput** - Date input with automatic formatting and calendar picker
* **HuxButton** - Multiple button variants with loading states
* **Automatic theming** - Light and dark mode support

## Common Patterns

Here are some common patterns you'll use with Hux UI:

<AccordionGroup>
  <Accordion title="Form Building" icon="pen-to-square">
    Combine text fields, buttons, and validation:

    ```dart theme={null}
    Form(
      key: _formKey,
      child: Column(
        children: [
          HuxInput(
            label: 'Email',
            hint: 'Enter your email',
            validator: (value) {
              if (value?.isEmpty ?? true) {
                return 'Email is required';
              }
              return null;
            },
          ),
          SizedBox(height: 16),
          HuxButton(
            onPressed: () {
              if (_formKey.currentState!.validate()) {
                // Form is valid
              }
            },
            child: Text('Submit'),
          ),
        ],
      ),
    )
    ```
  </Accordion>

  <Accordion title="Loading States" icon="spinner">
    Show loading indicators and overlays:

    ```dart theme={null}
    HuxLoadingOverlay(
      isLoading: _isLoading,
      message: 'Processing...',
      child: Column(
        children: [
          HuxButton(
            onPressed: _isLoading ? null : _handleSubmit,
            isLoading: _isLoading,
            child: Text('Submit'),
          ),
          // Or standalone loading
          if (_isLoading) HuxLoading(size: HuxLoadingSize.medium),
        ],
      ),
    )
    ```
  </Accordion>

  <Accordion title="Theme Customization" icon="palette">
    Customize colors and apply themes:

    ```dart theme={null}
    HuxButton(
      onPressed: () {},
      child: Text('Custom Color'),
      variant: HuxButtonVariant.primary,
      primaryColor: Colors.purple, // Custom primary color
    )

    // Or use design tokens
    Container(
      color: HuxTokens.surfaceElevated(context),
      child: Text(
        'Themed content',
        style: TextStyle(color: HuxTokens.textPrimary(context)),
      ),
    )
    ```
  </Accordion>

  <Accordion title="Data Display" icon="chart-bar">
    Show data with charts and badges:

    ```dart theme={null}
    Column(
      children: [
        HuxChart.line(
          data: [
            {'x': 1, 'y': 10},
            {'x': 2, 'y': 20},
            {'x': 3, 'y': 15},
          ],
          xField: 'x',
          yField: 'y',
          title: 'Sales Data',
        ),
        SizedBox(height: 20),
        Row(
          children: [
            HuxBadge(
              label: 'New',
              variant: HuxBadgeVariant.primary,
            ),
            SizedBox(width: 8),
            HuxBadge(
              label: 'Success',
              variant: HuxBadgeVariant.success,
            ),
          ],
        ),
      ],
    )
    ```
  </Accordion>
</AccordionGroup>

## Next Steps

Now that you've built your first Hux UI app, explore more features:

<CardGroup cols={2}>
  <Card title="Component Reference" icon="puzzle-piece" href="/components/buttons">
    Explore all available components and their APIs
  </Card>

  <Card title="Theming Guide" icon="palette" href="/theming">
    Learn how to customize themes and design tokens
  </Card>

  <Card title="Advanced Examples" icon="code" href="/examples/form-building">
    See complex implementations and best practices
  </Card>

  <Card title="Accessibility" icon="universal-access" href="/advanced/accessibility">
    Make your apps accessible with Hux UI
  </Card>
</CardGroup>

## Get Help

If you need assistance:

* **Issues**: [GitHub Issues](https://github.com/lofidesigner/hux/issues)
* **Source Code**: [github.com/lofidesigner/hux](https://github.com/lofidesigner/hux)
* **Package**: [pub.dev/packages/hux](https://pub.dev/packages/hux)
* **Figma Library**: [Figma Community](https://www.figma.com/community/file/1541197128732135637/the-hux-ui)

<Note>
  The complete source code for this quickstart example is available in the [Hux UI repository examples](https://github.com/lofidesigner/hux/tree/main/example).
</Note>