Getting Started

Proyecto Viviana is a SolidJS component library inspired by Adobe's React Spectrum. It provides accessible, high-quality UI components built on top of solidaria — a port of React Aria for SolidJS.

Features

• Accessible by default — Built on WAI-ARIA patterns with full keyboard navigation
• 60+ Components — From buttons to data tables, calendars to color pickers
• 100+ ARIA Hooks — Low-level hooks for building custom accessible components
• SSR Compatible — Works with TanStack Start and other SSR frameworks
• Compiled styles — Spectrum tokens compiled to a static stylesheet, themed through CSS custom properties

Quick Example

Here's a simple button component in action:

import { Button } from '@proyecto-viviana/solid-spectrum';

function App() {
  const [pressed, setPressed] = createSignal(false);

  return (
    <Button onPress={() => setPressed(true)}>
      {pressed() ? 'Pressed' : 'Click me'}
    </Button>
  );
}

Package Architecture

The library is organized into four packages:

Next Steps

• Installation — Set up the packages in your project
• Components — Explore the component library
• Hooks — Build custom components with ARIA hooks