@grape.ui/react

Grape UI is a React design system. Its tokens are synced from Figma, its corners are Figma-identical squircles, and its components are accessible Radix primitives styled with Tailwind v4.

npm install @grape.ui/react

Requires React 18.3+ or 19.

Styles

If your app already runs Tailwind v4, import the theme and point Tailwind at the package:

@import "tailwindcss";
@import "@grape.ui/react/theme.css";
@source "../node_modules/@grape.ui/react/dist"; /* required, or components render unstyled */

If it doesn't, import the all-in-one stylesheet instead:

@import "@grape.ui/react/styles.css";

Usage

import { Button, Tabs, TabsList, TabsTrigger, Toaster, toast } from "@grape.ui/react";

export function App() {
  return (
    <>
      <Button onClick={() => toast.success("Saved")}>Save changes</Button>
      <Toaster />
    </>
  );
}

<Toaster /> goes once near the app root. Toasts always stack in the top-right corner.

Corners

Button and Tabs share a corner axis: round (the default squircle) or pill. Set it once for a whole surface instead of on every control:

import { CornerProvider } from "@grape.ui/react";

<CornerProvider corner="pill">{children}</CornerProvider>;

An explicit corner prop on a component still wins over the provider.

Tokens

Design tokens are also exported as data, for building your own tooling:

import { radiusScale } from "@grape.ui/react/tokens";

License

MIT