Accessible components
that just work.

npm install @compa11y/react

import { useState } from "react";
import {
  Button, Dialog, Input, Select, Switch,
  Tooltip, Heading, Text, Alert
} from "@compa11y/react";

function App() {
  const [open, setOpen] = useState(false);
  const [darkMode, setDarkMode] = useState(false);

  return (
    <>
      <Heading level={1}>My Accessible App</Heading>
      <Text color="muted">Built with compa11y — accessibility included.</Text>

      <Alert type="info">All components below are fully keyboard and screen reader accessible.</Alert>

      <div style={{ display: "flex", gap: "8px", alignItems: "center", marginTop: "16px" }}>
        <Tooltip label="Opens a confirmation dialog">
          <Button onClick={() => setOpen(true)}>Open Dialog</Button>
        </Tooltip>
        <Switch checked={darkMode} onCheckedChange={setDarkMode}>
          Dark mode
        </Switch>
      </div>

      <Dialog open={open} onOpenChange={setOpen}>
        <Dialog.Title>Create Account</Dialog.Title>
        <Dialog.Description>Fill in your details below.</Dialog.Description>
        <Input label="Full name" required />
        <Input label="Email" type="email" hint="We'll never share your email." required />
        <Select
          options={[
            { value: "dev", label: "Developer" },
            { value: "design", label: "Designer" },
            { value: "pm", label: "Product Manager" },
          ]}
          placeholder="Select your role"
        />
        <Dialog.Actions>
          <Button variant="outline" onClick={() => setOpen(false)}>Cancel</Button>
          <Button onClick={() => setOpen(false)}>Create</Button>
        </Dialog.Actions>
      </Dialog>
    </>
  );
}