@proyecto-viviana/solidaria-components

Pre-wired headless components for SolidJS - a port of React Aria Components.

Installation

``bash
bun add @proyecto-viviana/solidaria-components solid-js
`

Overview

solidaria-components provides ready-to-use headless components that combine state management and accessibility in one package. Unlike the lower-level hooks in solidaria, these components handle all the wiring for you while giving you full control over styling through render props and data attributes.

Available Components

$3

| Component | Description |
|-----------|-------------|
| Button | Accessible button with press states |
| Checkbox, CheckboxGroup | Checkboxes with group support |
| Radio, RadioGroup | Radio buttons |
| ToggleSwitch | Toggle switch control |
| TextField, Input, TextArea, Label | Text inputs with labels |
| NumberField | Numeric input with inc/dec buttons |
| SearchField | Search input with clear button |
| Slider, SliderTrack, SliderThumb | Range slider |

$3

| Component | Description |
|-----------|-------------|
| Tabs, TabList, Tab, TabPanel | Tabbed navigation |
| Breadcrumbs, BreadcrumbItem | Breadcrumb navigation |
| Link | Accessible link |
| Landmark | ARIA landmark regions with F6 navigation |

$3

| Component | Description |
|-----------|-------------|
| Select, SelectTrigger, SelectValue, SelectListBox, SelectOption | Dropdown select |
| Menu, MenuItem, MenuTrigger, MenuButton | Action menus |
| ListBox, ListBoxOption | Selectable lists |

$3

| Component | Description |
|-----------|-------------|
| ProgressBar | Progress indicator |
| Separator | Visual divider |
| VisuallyHidden | Screen reader only content |

Usage

$3

Components expose state through render props for full styling control:

`tsx
import { Button } from "@proyecto-viviana/solidaria-components";

function MyButton() {
return (
console.log("pressed")}>
{({ isPressed, isHovered, isFocusVisible }) => (
class={btn ${isPressed() ? "pressed" : ""} ${isHovered() ? "hovered" : ""}}
>
Click me

)}

);
}
`

$3

Components also expose state via data attributes for CSS styling:

`tsx
import { Button } from "@proyecto-viviana/solidaria-components";

function MyButton() {
return (
{}}>
Click me

);
}
`

`css
.my-button {
background: blue;
}
.my-button[data-pressed] {
background: darkblue;
}
.my-button[data-hovered] {
background: lightblue;
}
.my-button[data-focus-visible] {
outline: 2px solid white;
}
`

$3

`tsx
import { Checkbox, CheckboxGroup } from "@proyecto-viviana/solidaria-components";

function Preferences() {
return (

{({ groupProps }) => (


`tsx
import { Select, SelectTrigger, SelectValue, SelectListBox, SelectOption } from "@proyecto-viviana/solidaria-components";

const countries = [
{ key: "us", label: "United States" },
{ key: "uk", label: "United Kingdom" },
{ key: "ca", label: "Canada" },
];

function CountrySelect() {
return (
console.log(key)}>




{(item) => (

{({ isSelected, isFocused }) => (
option ${isSelected() ? "selected" : ""}}>
{item.label}

)}

)}


);
}
`

$3

`tsx
import { Tabs, TabList, Tab, TabPanel } from "@proyecto-viviana/solidaria-components";

const tabs = [
{ id: "overview", label: "Overview", content: "Overview content here" },
{ id: "features", label: "Features", content: "Features content here" },
{ id: "pricing", label: "Pricing", content: "Pricing content here" },
];

function Navigation() {
return (


{(item) => (

{({ isSelected }) => (
{item.label}
)}

)}

{tabs.map((tab) => (
{tab.content}
))}

);
}
`

$3

`tsx
import { Slider, SliderTrack, SliderThumb, SliderOutput } from "@proyecto-viviana/solidaria-components";

function VolumeSlider() {
return (

{({ value, getValuePercent }) => (
<>