Start with a solid foundation.

staqui is an independent React and TypeScript library. Import a stylesheet, add a provider, and compose your interface.

Install in another React app

npm install @staqforce-studio/staqui

React and React DOM 18.3 or 19 are peer dependencies. Styles and declarations ship with the package. Use it in any compatible React application.

Compose your first interface

"use client";
import { StaqProvider, Button, TextField, Stack } from "@staqforce-studio/staqui";
import "@staqforce-studio/staqui/styles.css";

export default function App() {
  return (
    <StaqProvider theme="light">
      <form onSubmit={event => event.preventDefault()}>
        <Stack>
          <TextField label="Project name" required />
          <Button type="submit" variant="primary">Create project</Button>
        </Stack>
      </form>
    </StaqProvider>
  );
}

Use with Next.js

Import the stylesheet once in your root layout. Components that use state or callbacks belong in client components. staqui’s built entry points retain the use client directive, and the package can also render in a conventional React application.

Run this workspace

corepack enable
pnpm install --frozen-lockfile
pnpm build:ui
pnpm generate:docs
pnpm dev

Use Node.js 22 or later. pnpm is pinned in the root package.json. The documentation starts at http://localhost:3000 and needs no environment variables.