@keltroth/galaxy

A galaxy of reusable Astro components for building modern web applications.

Features

• 🚀 Astro-native: Built specifically for Astro projects
• 🎨 Themable: Consistent theming system with variants, statuses, and sizes
• 📦 Modular: Import only the components you need
• 🔍 TypeScript: Fully typed component props for better developer experience
• 🎯 Lightweight: Minimal dependencies for optimal performance

Installation

# npm
npm install @keltroth/galaxy

# yarn
yarn add @keltroth/galaxy

# pnpm
pnpm add @keltroth/galaxy

Usage

Import components directly in your Astro files:

---
import { Button, Card, CardHeader, CardBody } from '@keltroth/galaxy';
---

<Card>
  <CardHeader>Hello Galaxy</CardHeader>
  <CardBody>
    <p>This is a card component from the Galaxy library.</p>
    <Button>Click me</Button>
  </CardBody>
</Card>

Available Components

The library includes the following components:

• Button: Customizable button with various styles and sizes
• ButtonGroup: Container for grouping related buttons
• Card: Container component with optional header and body
• CardHeader: Header section for the Card component
• CardBody: Body section for the Card component
• Cartouche: Label/tag component for displaying metadata
• Footer: Page footer component
• Header: Page header component
• Logo: Component for displaying a logo
• Menu: Navigation menu component
• Sidenav: Side navigation component

Component API

Button

A versatile button component with multiple variants and states.

---
import { Button } from '@keltroth/galaxy';
---

<!-- Default button -->
<Button>Click me</Button>

<!-- Button with variant and status -->
<Button variant="outline" status="success">Success</Button>

<!-- Button with size -->
<Button size="lg">Large Button</Button>

<!-- Icon button -->
<Button icon>
  <svg><!-- Your icon SVG --></svg>
</Button>

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | variant | 'plain' | 'outline' | 'invisible' | 'plain' | Visual style of the button | | status | 'accent' | 'success' | 'neutral' | 'error' | 'accent' | Status/color of the button | | size | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Size of the button | | icon | boolean | false | Whether the button contains only an icon |

Card

A container component for grouping related content.

---
import { Card, CardHeader, CardBody } from '@keltroth/galaxy';
---

<Card>
  <CardHeader>Card Title</CardHeader>
  <CardBody>
    <p>Card content goes here.</p>
  </CardBody>
</Card>

Styling

Galaxy components use SCSS for styling with a consistent theming system. The components are designed to be customizable through CSS variables.

You can customize the appearance by overriding the CSS variables:

:root {
  /* Button customization */
  --color-plain-accent-fill-normal: #3366ff;
  --color-plain-accent-content-normal: white;
  --color-plain-accent-stroke-normal: #3366ff;
  
  /* Size customization */
  --sizes-padding-inline-start-md: 1rem;
  --sizes-padding-inline-end-md: 1rem;
  --sizes-font-size-md: 1rem;
}

Browser Support

Galaxy components support all modern browsers.

License

MIT © Django Janny