Pre-wired headless components for SolidJS - port of react-aria-components
npm install @proyecto-viviana/solidaria-componentsPre-wired headless components for SolidJS - a port of React Aria Components.
``bash`
bun add @proyecto-viviana/solidaria-components solid-js
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.
| 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 |
| Component | Description |
|-----------|-------------|
| Tabs, TabList, Tab, TabPanel | Tabbed navigation |
| Breadcrumbs, BreadcrumbItem | Breadcrumb navigation |
| Link | Accessible link |
| Landmark | ARIA landmark regions with F6 navigation |
| Component | Description |
|-----------|-------------|
| Select, SelectTrigger, SelectValue, SelectListBox, SelectOption | Dropdown select |
| Menu, MenuItem, MenuTrigger, MenuButton | Action menus |
| ListBox, ListBoxOption | Selectable lists |
| Component | Description |
|-----------|-------------|
| ProgressBar | Progress indicator |
| Separator | Visual divider |
| VisuallyHidden | Screen reader only content |
Components expose state through render props for full styling control:
`tsx
import { Button } from "@proyecto-viviana/solidaria-components";
function MyButton() {
return (
);
}
`
Components also expose state via data attributes for CSS styling:
`tsx
import { Button } from "@proyecto-viviana/solidaria-components";
function MyButton() {
return (
);
}
`
`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;
}
`tsx
import { Checkbox, CheckboxGroup } from "@proyecto-viviana/solidaria-components";
function Preferences() {
return (
{({ groupProps }) => (
{({ inputProps, isSelected }) => (
)}
{({ inputProps, isSelected }) => (
)}
)}
);
}
`
`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 (
);
}
`
`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) => (
))}
);
}
`
`tsx
import { Slider, SliderTrack, SliderThumb, SliderOutput } from "@proyecto-viviana/solidaria-components";
function VolumeSlider() { Components provide context for nested access: function CustomTabIndicator() { Full TypeScript support with exported types: MIT
return (
{({ value, getValuePercent }) => (
<>
Volume
{({ isDragging }) => (
track ${isDragging() ? "dragging" : ""}}>
${getValuePercent() * 100}% }} />`
{({ isFocusVisible }) => (
thumb ${isFocusVisible() ? "focused" : ""}} />
)}
)}
>
)}
);
}`Context
tsx`
import { TabsStateContext } from "@proyecto-viviana/solidaria-components";
const state = useContext(TabsStateContext);
return Selected: {state?.selectedKey()};
}`Styling Approaches
$3
tsx``$3
tsx``css`
.btn[data-pressed] { background: red; }
.btn[data-hovered] { background: pink; }`$3
tsx``TypeScript
tsx``
import {
Button,
type ButtonProps,
type ButtonRenderProps,
} from "@proyecto-viviana/solidaria-components";License