🌟 CelestialUI Svelte

A comprehensive Svelte component library with multi-framework styling support, built with TypeScript and designed for modern web applications.

✨ Features

• 🎨 Multi-Framework Styling: Support for Tailwind CSS, SCSS, Material Design, and pure CSS
• 🔧 Svelte 5 Ready: Built specifically for Svelte 5 with runes and modern patterns
• 🎯 TypeScript Support: Full TypeScript support with comprehensive type definitions
• ♿ Accessibility Focused: WCAG compliant components with keyboard navigation
• 📱 Responsive Design: Mobile-first approach with responsive utilities
• 🌓 Dark Mode: Built-in theme switching capabilities
• 🧪 Well Tested: Comprehensive unit, integration, and E2E tests
• 📖 Storybook Integration: Interactive component documentation
• 🔥 Tree Shakeable: Optimized bundle sizes with selective imports

🚀 Quick Start

Installation

# npm
npm install @celestial-ui/svelte

# yarn
yarn add @celestial-ui/svelte

# pnpm
pnpm add @celestial-ui/svelte

Basic Usage

<script>
  import { Button, Input, Card, Modal, Toast } from '@celestial-ui/svelte'
  import { applyTheme } from '@celestial-ui/svelte'
  import '@celestial-ui/svelte/dist/svelte.css'

  let email = ''
  let showModal = false

  // Apply theme
  applyTheme('light')
</script>

<Card>
  <h2>Welcome to CelestialUI</h2>
  
  <Input 
    bind:value={email}
    label="Email Address" 
    type="email"
    placeholder="Enter your email"
    clearable 
  />
  
  <Button 
    variant="primary" 
    onclick={() => showModal = true}
  >
    Open Modal
  </Button>
</Card>

<Modal 
  bind:open={showModal} 
  title="Hello World"
  closable
>
  <p>This is a modal dialog!</p>
</Modal>

🧩 Components

Core Components

• Button - Versatile button with multiple variants and states
• Input - Enhanced input with validation, icons, and floating labels
• Card - Flexible card component with elevation and styling options
• Icon - Universal icon component with multiple icon sets
• Modal - Accessible modal dialog with backdrop and keyboard support
• Toast - Toast notification system with positioning and timing

Button Component

<script>
  import { Button } from '@celestial-ui/svelte'
</script>

<!-- Variants -->
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>

<!-- Sizes -->
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>

<!-- States -->
<Button loading>Loading...</Button>
<Button disabled>Disabled</Button>

Input Component

<script>
  import { Input } from '@celestial-ui/svelte'
  let value = ''
</script>

<!-- Basic Input -->
<Input 
  bind:value={value}
  label="Full Name" 
  placeholder="Enter your name"
/>

<!-- With Icons -->
<Input 
  bind:value={value}
  label="Email"
  type="email" 
  prefixIcon="envelope"
  clearable
/>

<!-- Variants -->
<Input variant="outlined" label="Outlined" />
<Input variant="filled" label="Filled" />
<Input variant="underlined" label="Underlined" />

Card Component

<script>
  import { Card } from '@celestial-ui/svelte'
</script>

<Card variant="elevated" padding="lg" rounded="lg">
  <h3>Card Title</h3>
  <p>Card content goes here...</p>
</Card>

<Card variant="outlined" hover>
  <h3>Hoverable Card</h3>
  <p>This card has hover effects.</p>
</Card>

Modal Component

<script>
  import { Modal, Button } from '@celestial-ui/svelte'
  let showModal = false
</script>

<Button onclick={() => showModal = true}>
  Open Modal
</Button>

<Modal 
  bind:open={showModal}
  title="Modal Title"
  size="md"
  closable
  closeOnBackdrop
>
  <p>Modal content...</p>
  <Button onclick={() => showModal = false}>
    Close
  </Button>
</Modal>

Toast Component

<script>
  import { Toast } from '@celestial-ui/svelte'
  
  let showToast = false
</script>

{#if showToast}
  <Toast 
    type="success"
    title="Success!"
    message="Operation completed successfully"
    duration={3000}
    closable
    onclose={() => showToast = false}
  />
{/if}

🎨 Styling Frameworks

Tailwind CSS (Default)

The library comes with Tailwind CSS styling by default:

<script>
  import '@celestial-ui/svelte/dist/svelte.css'
  import { Button } from '@celestial-ui/svelte'
</script>

<Button class="custom-class">
  Custom Styled Button
</Button>

Custom Styling

You can override styles with custom CSS:

<style>
  :global(.cui-button--custom) {
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
    border: none;
    color: white;
  }
</style>

<Button class="cui-button--custom">
  Gradient Button
</Button>

🌓 Theme System

Theme Utilities

<script>
  import { 
    applyTheme, 
    getThemePreference, 
    setThemePreference,
    toggleTheme 
  } from '@celestial-ui/svelte'

  // Apply a theme
  applyTheme('dark')

  // Get system preference
  const preference = getThemePreference()
  
  // Set theme preference
  setThemePreference('dark')
  
  // Toggle between light and dark
  const handleToggle = () => {
    const current = getThemePreference()
    const newTheme = current === 'dark' ? 'light' : 'dark'
    applyTheme(newTheme)
  }
</script>

<button onclick={handleToggle}>
  Toggle Theme
</button>

Custom Theme Tokens

The library uses CSS custom properties that you can override:

:root {
  --cui-color-primary-500: #your-primary-color;
  --cui-color-secondary-500: #your-secondary-color;
  --cui-spacing-4: 1.5rem;
  --cui-radius-md: 0.5rem;
}

🧪 Testing

Unit Tests

# Run unit tests
npm run test:unit

# Run with coverage
npm run test:coverage

E2E Tests

# Run E2E tests
npm run test:e2e

# Run E2E tests in development
npm run test:e2e:dev

Test Utilities

The library provides test utilities for easier testing:

import { render, testInBothThemes } from '@celestial-ui/svelte/test-utils'
import Button from './Button.svelte'

test('button renders correctly', () => {
  const { getByTestId } = render(Button, {
    props: { children: () => 'Click me' }
  })
  
  expect(getByTestId('button')).toBeInTheDocument()
})

test('button works in both themes', async () => {
  await testInBothThemes((theme) => {
    const { getByTestId } = render(Button, {
      props: { children: () => 'Theme test' },
      theme
    })
    
    expect(getByTestId('button')).toBeInTheDocument()
  })
})

📖 Development

Setup

# Clone the repository
git clone https://github.com/dev-1603/celestialui-svelte.git

# Install dependencies
cd celestialui-svelte
pnpm install

# Start development server
pnpm run dev

# Start Storybook
pnpm run storybook

Building

# Build library
pnpm run build-lib

# Build demo
pnpm run build-demo

# Build both
pnpm run build

This creates:

• dist/celestial-ui.es.js - ES modules build
• dist/celestial-ui.umd.js - UMD build
• dist/svelte.css - CSS styles
• dist/index.d.ts - TypeScript definitions

🔧 SvelteKit Integration

Installation

npm install @celestial-ui/svelte

SvelteKit Usage

<!-- app.html -->
<head>
  <link href="@celestial-ui/svelte/dist/svelte.css" rel="stylesheet">
</head>

<!-- +layout.svelte -->
<script>
  import { applyTheme } from '@celestial-ui/svelte'
  import { onMount } from 'svelte'

  onMount(() => {
    applyTheme('light')
  })
</script>

<main>
  <slot />
</main>

<!-- +page.svelte -->
<script>
  import { Button, Card, Input } from '@celestial-ui/svelte'
</script>

<Card>
  <h1>Welcome to SvelteKit + CelestialUI</h1>
  <Input label="Name" placeholder="Enter your name" />
  <Button variant="primary">Submit</Button>
</Card>

📱 Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

🔗 Links

• 📖 Documentation
• 🐛 Issues
• 💬 Discussions
• 📧 Email

📄 License

MIT License - see the LICENSE file for details.

🤝 Contributing

We welcome contributions! Please see our contributing guidelines for more details.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Made with ❤️ by the CelestialUI team