@stellar-ui/ui

Pre-styled, production-ready UI components built on top of the headless @stellar-ui/core primitives.

Installation

npm install @stellar-ui/ui @stellar-ui/core react react-dom

Usage

Styled Dialog

Import the styled Dialog components and the CSS:

import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogBody,
  DialogFooter,
  DialogClose,
} from '@stellar-ui/ui';
import '@stellar-ui/ui/dialog.css';

function App() {
  return (
    <Dialog>
      <DialogTrigger>Open Dialog</DialogTrigger>
      <DialogContent>
        <DialogClose />
        <DialogHeader>
          <DialogTitle>Dialog Title</DialogTitle>
          <DialogDescription>
            This is the dialog description.
          </DialogDescription>
        </DialogHeader>
        <DialogBody>
          <p>Your dialog content goes here.</p>
        </DialogBody>
        <DialogFooter>
          <DialogTrigger className="variant-secondary">Cancel</DialogTrigger>
          <DialogTrigger>Confirm</DialogTrigger>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

Components

Dialog (Root)

Re-export of the headless Dialog component from @stellar-ui/core.

Props:

• open?: boolean - Controlled open state
• defaultOpen?: boolean - Default open state
• onOpenChange?: (open: boolean) => void - Callback when open state changes
• modal?: boolean - Whether the dialog is modal (default: true)

DialogTrigger

Styled button that toggles the dialog.

CSS Variants:

• Default (primary blue)
• variant-secondary - Gray background
• variant-outline - Outlined with transparent background
• variant-destructive - Red background for dangerous actions

DialogContent

Pre-styled dialog content container with overlay.

Features:

• Centered modal positioning
• Smooth animations
• Responsive design
• Auto-includes DialogOverlay

DialogHeader

Container for dialog title and description with proper spacing.

DialogTitle

Styled h2 heading for the dialog title.

DialogDescription

Styled description text below the title.

DialogBody

Container for the main dialog content.

DialogFooter

Action buttons container with responsive layout.

Behavior:

• Stacks vertically on mobile
• Horizontal with right alignment on desktop

DialogClose

Close button (×) positioned in top-right corner.

Props:

• children? - Custom content (default: "×")

Styling

The components come with beautiful default styles, but you can customize them by:

1. Using CSS classes:

<DialogTrigger className="variant-destructive">
  Delete
</DialogTrigger>

2. Overriding CSS:

.stellar-dialog-content {
  max-width: 600px;
  background: linear-gradient(to bottom, white, #f0f0f0);
}

3. Using inline styles:

<DialogContent style={{ maxWidth: '800px' }}>
  ...
</DialogContent>

Features

✨ Pre-styled - Beautiful default styles out of the box
📱 Responsive - Mobile-friendly layouts
🎬 Animated - Smooth entrance/exit animations
🌙 Dark Mode - Automatic dark mode support
♿ Accessible - Full keyboard and screen reader support
🎨 Customizable - Easy to override with CSS
🔧 Composable - Mix and match components as needed

CSS Variables

You can customize the theme using CSS variables:

:root {
  --stellar-dialog-overlay-bg: rgba(0, 0, 0, 0.5);
  --stellar-dialog-content-bg: white;
  --stellar-dialog-border-radius: 0.5rem;
  /* Add more as needed */
}

Examples

See the docs app for complete examples including:

• Basic dialogs
• Controlled dialogs
• Forms in dialogs
• Confirmation dialogs
• Custom styled dialogs