Quickstart

Get up and running with Rebel UI in minutes. This guide will walk you through creating a simple login form using Rebel UI components.

Creating a Login Form

Let’s create a simple login form using Rebel UI components. This example demonstrates component composition, form handling, and state management.

Live Example

Sign In

Code

Here’s the complete code for the login form:

<script>
    import { Card, Input, Button, Checkbox } from 'rebel-ui';

    let email = '';
    let password = '';
    let rememberMe = false;
    let isLoading = false;

    async function handleSubmit() {
        isLoading = true;
        // Your login logic here
        await new Promise(resolve => setTimeout(resolve, 2000));
        isLoading = false;
    }
</script>

<Card variant="elevated" padding="lg">
    <h2>Sign In</h2>
    <div class="form-stack">
        <Input
            label="Email"
            type="email"
            placeholder="Enter your email"
            bind:value={email}
            required
        />
        <Input
            label="Password"
            type="password"
            placeholder="Enter your password"
            bind:value={password}
            required
        />
        <Checkbox
            label="Remember me"
            bind:checked={rememberMe}
        />
        <Button
            variant="primary"
            label="Sign In"
            loading={isLoading}
            onclick={handleSubmit}
        />
    </div>
</Card>

<style>
    h2 {
        margin: 0 0 1.5rem 0;
        color: var(--rebel-text-primary);
    }

    .form-stack {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
</style>

Next Steps

Now that you’ve created your first component with Rebel UI, here are some suggestions for what to explore next:

  1. Component Library: Browse our component library to discover all available components
  2. Theming: Learn how to customize the theme to match your brand
  3. Form Handling: Check out our form components for more advanced form features
  4. Layout Components: Explore our layout components for structuring your pages

Tips and Best Practices

  • Use the bind:value directive for two-way data binding with form inputs
  • Leverage the loading state on buttons to provide feedback during async operations
  • Combine multiple components to create complex UI patterns
  • Use CSS variables for consistent theming across your application

Common Patterns

Here are some common patterns you might find useful:

Form Validation

<Input
    label="Email"
    type="email"
    required
    error={!email ? "Email is required" : ""}
/>

Responsive Layouts

<div class="responsive-grid">
    <Card>Content 1</Card>
    <Card>Content 2</Card>
    <Card>Content 3</Card>
</div>

<style>
    .responsive-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1rem;
    }
</style>

Loading States

<Button
    variant="primary"
    label={isLoading ? "Loading..." : "Submit"}
    loading={isLoading}
    disabled={isLoading}
/>

Need Help?