Skip to main content
Browse docs

Marwes documentation

Get started with React

Install Marwes for React and render your first accessible component.

1. Install with the official CLI

The CLI installs @marwes-ui/react, wires the provider for supported Vite layouts, and runs diagnostics.

pnpm dlx @marwes-ui/cli init --adapter react

2. Render a public component

This is the same canonical fixture that the repository typechecks for React.

import {
  Button,
  ButtonVariant,
  CheckboxField,
  EmailField,
  MarwesProvider,
  SubmitButton,
} from "@marwes-ui/react"
import { useState } from "react"

export function App() {
  const [email, setEmail] = useState("")
  const [subscribed, setSubscribed] = useState(false)

  return (
    <MarwesProvider>
      <EmailField
        label="Email"
        input={{ value: email, onValueChange: setEmail, placeholder: "you@example.com" }}
      />
      <CheckboxField
        label="Send me product updates"
        checkbox={{ checked: subscribed, onCheckedChange: setSubscribed }}
      />
      <Button variant={ButtonVariant.secondary}>Preview</Button>
      <SubmitButton>Save</SubmitButton>
    </MarwesProvider>
  )
}

3. Verify the app

A successful doctor run confirms the adapter import, rendered provider, and production build.

pnpm dlx @marwes-ui/cli doctor --run-build