Arui

Arui is an open-source React component library with an Apple HIG identity, distributed as an npm package. Import the components you need, add one theme stylesheet, and Tailwind v4 generates the rest.

• Live showcase & component gallery: https://arui.vercel.app
• Source: https://github.com/aogusto/arui

Installation

npm install @aogusto/arui

arui assumes React 19 and Tailwind 4 (peerDependencies).

Theme setup (Tailwind 4)

In your app's CSS:

@import "tailwindcss";
@import "@aogusto/arui/theme.css";
@source "../node_modules/@aogusto/arui/dist";

• @aogusto/arui/theme.css ships the HIG tokens, the dark variant and the Inter font, already self-contained.
• The @source line is required: without it Tailwind never scans node_modules, so the components' classes generate no CSS and everything renders unstyled. Adjust the path relative to wherever your CSS file lives.

Usage

import { Button, Card, Sheet } from "@aogusto/arui"

export function Example() {
  return <Button>Hello</Button>
}

Forms (optional)

Form and FormField are built on react-hook-form, which is an optional peer. Install it only if you use them:

npm install react-hook-form

Validation with zod is your call (zod plus @hookform/resolvers); arui does not require either.

Components

61 components, exported flat from the package root (import { X } from "@aogusto/arui"), plus the cn() class-merge utility and the useIsMobile hook.

| Group | Components | |---|---| | Disclosure | accordion, collapsible | | Buttons & actions | button, button-group, toggle, toggle-group, kbd | | Forms & inputs | form, field, input, input-group, input-otp, label, checkbox, radio-group, select, native-select, combobox, switch, slider, textarea, calendar | | Compact fields | input-field, textarea-field, select-field, native-select-field | | Layout & structure | card, separator, aspect-ratio, scroll-area, resizable, sidebar, item, direction | | Overlays & feedback | dialog, alert-dialog, sheet, drawer, popover, hover-card, tooltip, dropdown-menu, context-menu, menubar, command, sonner (toast), alert, empty, skeleton, spinner, progress, badge | | Navigation | tabs, breadcrumb, pagination, navigation-menu | | Data display | table, chart, carousel, avatar | | Foundation | glass-surface, the frosted material used by dialogs, sheets, popovers, and the rest of the functional layer |

Each entry above is a Tailwind-styled React component (or set of subcomponents, e.g. Dialog, DialogTrigger, DialogContent, …) exported by name from "@aogusto/arui".

The *Field group is the compact variant of the form controls: the label lives in a real notch cut into the border instead of sitting above the input, which saves about 26px of height per field. Same props as the plain control, plus label.

Button also carries the material as two variants, glass and glass-clear. Use glass when the button is the only glass piece in its region, and glass-clear when there is media behind it (photo, video, gradient), where a built-in scrim keeps the label readable. Never nest either one inside a GlassSurface, a Dialog, a Popover or anything else that is already glass: there the right variant is ghost.

Example: dialog

import {
  Button,
  Dialog, DialogTrigger, DialogContent, DialogHeader,
  DialogTitle, DialogDescription, DialogFooter, DialogClose,
} from "@aogusto/arui"

export default function Example() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button variant="outline">Open dialog</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Glass surface dialog</DialogTitle>
          <DialogDescription>Backed by the Arui glass material.</DialogDescription>
        </DialogHeader>
        <DialogFooter>
          <DialogClose asChild><Button variant="ghost">Cancel</Button></DialogClose>
          <Button>Confirm</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}

Example: a form (react-hook-form + zod)

The form export is a thin, accessible wrapper over react-hook-form. Pair it with input, label, and button:

npm install react-hook-form @hookform/resolvers zod

import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import { z } from "zod"

import {
  Button, Input,
  Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage,
} from "@aogusto/arui"

const schema = z.object({
  email: z.string().email("Enter a valid email"),
  displayName: z.string().min(2, "At least 2 characters"),
})
type FormValues = z.infer<typeof schema>

export function ProfileForm() {
  const form = useForm<FormValues>({
    resolver: zodResolver(schema),
    defaultValues: { email: "", displayName: "" },
  })

  const onSubmit = form.handleSubmit((values) => {
    // submit `values` to your API here
  })

  return (
    <Form {...form}>
      <form onSubmit={onSubmit} className="space-y-4">
        <FormField
          control={form.control}
          name="email"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Email</FormLabel>
              <FormControl>
                <Input type="email" placeholder="[email protected]" {...field} />
              </FormControl>
              <FormDescription>We'll never share your email.</FormDescription>
              <FormMessage />
            </FormItem>
          )}
        />
        <FormField
          control={form.control}
          name="displayName"
          render={({ field }) => (
            <FormItem>
              <FormLabel>Display name</FormLabel>
              <FormControl>
                <Input placeholder="Ada Lovelace" {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        <Button type="submit">Save</Button>
      </form>
    </Form>
  )
}

Development

Working on the library itself (not consuming it):

npm install
npm run dev             # component gallery (Vite dev server)
npm run build           # tsup, emits dist/ (this is what gets published)
npm run build:preview   # tsc -b + vite build, emits showcase-dist/ (the arui.vercel.app site)
npm run preview         # serves the built showcase
npm run typecheck       # tsc -b
npm test                # vitest run
npm run build:manifest  # regenerates mcp/manifest.json from the docs pages

The showcase (preview/) dogfoods the package: it imports components from "@aogusto/arui", aliased in vite.config.ts straight to src/index.ts during local dev, so the gallery always reflects the real public API.

License

MIT. See LICENSE.