Installation

Rebel UI is a modern, accessible component library for Svelte applications. Follow these steps to get started with Rebel UI in your project.

Requirements

  • Node.js 16.x or higher
  • Svelte 4.x or higher
  • SvelteKit 1.x (recommended) or standalone Svelte

Installing the Package

You can install Rebel UI using your preferred package manager:

# Using npm
npm install rebel-ui

# Using pnpm
pnpm add rebel-ui

# Using yarn
yarn add rebel-ui

Setting Up

1. Add CSS Variables

Add the Rebel UI CSS variables to your app’s global stylesheet (e.g., app.css or global.css):

:root {
    /* Base colors */
    --rebel-brand: #6366f1;
    --rebel-accent: #8b5cf6;
    --rebel-secondary: #64748b;

    /* Text colors */
    --rebel-text-primary: #1f2937;
    --rebel-text-secondary: #4b5563;
    --rebel-text-tertiary: #9ca3af;
    --rebel-text-disabled: #d1d5db;

    /* Background colors */
    --rebel-bg-light: #ffffff;
    --rebel-bg-dark: #111827;
    --rebel-surface: #ffffff;
    --rebel-surface-secondary: #f3f4f6;
    --rebel-surface-dark: #1f2937;
    --rebel-surface-secondary-dark: #374151;

    /* Border and shadow */
    --rebel-border: #e5e7eb;
    --rebel-focus-ring: rgba(99, 102, 241, 0.25);
    --rebel-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --rebel-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --rebel-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --rebel-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

    /* State colors */
    --rebel-error: #ef4444;
    --rebel-success: #22c55e;
    --rebel-warning: #f59e0b;
    --rebel-info: #3b82f6;

    /* State effects */
    --rebel-error-ring: rgba(239, 68, 68, 0.25);
    --rebel-success-ring: rgba(34, 197, 94, 0.25);
    --rebel-warning-ring: rgba(245, 158, 11, 0.25);
    --rebel-info-ring: rgba(59, 130, 246, 0.25);

    /* Disabled state */
    --rebel-disabled-bg: #f3f4f6;
    --rebel-disabled-bg-dark: #374151;

    /* Glass effect */
    --rebel-glass-bg: rgba(255, 255, 255, 0.1);
    --rebel-glass-bg-hover: rgba(255, 255, 255, 0.15);
    --rebel-glass-border: rgba(255, 255, 255, 0.2);

    /* Border radius */
    --rebel-radius-sm: 0.25rem;
    --rebel-radius-md: 0.375rem;
    --rebel-radius-lg: 0.5rem;
    --rebel-radius-xl: 0.75rem;
    --rebel-radius-2xl: 1rem;
    --rebel-radius-3xl: 1.5rem;

    /* Animation */
    --rebel-ease-out: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark mode overrides */
@media (prefers-color-scheme: dark) {
    :root {
        --rebel-text-primary: #f3f4f6;
        --rebel-text-secondary: #d1d5db;
        --rebel-text-tertiary: #6b7280;
        --rebel-surface: #1f2937;
        --rebel-surface-secondary: #374151;
        --rebel-border: #374151;
    }
}

2. Configure Dark Mode (Optional)

If you want to support manual dark mode switching, add a .dark class variant to your root element:

<html class="dark">
    <!-- Your app content -->
</html>

3. Import and Use Components

You can now import and use Rebel UI components in your Svelte files:

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

<Card padding="lg">
    <h2>Welcome to Rebel UI</h2>
    <Input
        label="Email"
        type="email"
        placeholder="Enter your email"
    />
    <Button
        variant="primary"
        label="Get Started"
    />
</Card>

TypeScript Support

Rebel UI is built with TypeScript and includes type definitions out of the box. No additional setup is required.

Next Steps

  • Check out our Components documentation to explore available components
  • Learn about our Design System principles
  • See Examples for common use cases and patterns

Support

If you encounter any issues or have questions: