Observatory Design System

A React component library for Vizzly visual testing applications. Built with Tailwind CSS v4.

Installation

``bash
npm install @vizzly-testing/observatory
`

Requirements

- React 18+ or 19+
- Tailwind CSS v4+
- downshift (optional, for Combobox)

Quick Start

Import the styles in your main CSS file:

`css
@import '@vizzly-testing/observatory/styles';
`

Import and use components:

`jsx
import { Button, Card, CardHeader, CardBody, Alert } from '@vizzly-testing/observatory';

function App() {
return (




Use Observatory components for consistent UI.

Get Started


);
}
`

Package Exports

`javascript
// Main components
import { Button, Card, DataTable, ... } from '@vizzly-testing/observatory';

// Image viewer components (separate entry for tree-shaking)
import { ZoomControls, ZoomableImage, useZoom } from '@vizzly-testing/observatory/image-viewer';

// CSS variables and animations
import '@vizzly-testing/observatory/styles';
`

Components

$3

CSS variables for theming (defined in styles.css):

`css
:root {
--vz-bg: #0f172a;
--vz-surface: #1a2332;
--vz-elevated: #1e293b;
--vz-border: #374151;
--vz-border-subtle: #2d3748;

--accent-success: #10b981;
--accent-warning: #f59e0b;
--accent-danger: #ef4444;
--accent-info: #3b82f6;

--text-primary: #ffffff;
--text-secondary: #9ca3af;
--text-tertiary: #6b7280;
--text-muted: #4b5563;
}
``

Documentation

See the docs folder for detailed component documentation:

- Core UI Components
- Form Controls
- Data Display
- Review Workflow
- Image Viewer
- Variant Selection

License

MIT