Getting Started

@proyecto-viviana/ui is Proyecto Viviana’s expressive component library. It shares the solidaria accessibility layer with solid-spectrum, and paints with its own Glasselated register.

Features

• Accessible by default — Built on WAI-ARIA patterns with full keyboard navigation
• House register — Glasselated tokens, fills, and type — not Spectrum 2 paint
• ARIA hooks — Low-level hooks for building custom accessible components
• SSR Compatible — Works with TanStack Start and other SSR frameworks
• Compiled styles — Import components.css once and wrap in a Provider

Quick Example

Here’s a fill Button from the register:

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

function App() {
  return <Button variant="primary">Primary</Button>;
}

Package Architecture

The library sits on the shared Solid stack:

Next Steps

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