Ant Distinct System

A modern React component layer built on Ant Design v6. It keeps AntD's behavior, accessibility, portals, keyboard support, and native motion while providing a quieter component API and a less enterprise-looking visual system.

Install

npm install antd antd-distinct-system

Import the complete static stylesheet once at your application entry point:

import "antd-distinct-system/styles.css";

Wrap the application:

import { DesignSystemProvider } from "antd-distinct-system";

export default function App() {
  return (
    <DesignSystemProvider mode="light">
      <YourApplication />
    </DesignSystemProvider>
  );
}

The provider enables AntD zeroRuntime, installs AntD's App context, and keeps portaled components inside the same design-system theme.

Complete AntD catalog

Every public AntD v6 component is available from this package, including:

import {
  Alert,
  Calendar,
  Checkbox,
  ColorPicker,
  DatePicker,
  Form,
  Menu,
  Pagination,
  Progress,
  Tabs,
  Timeline,
  Tooltip,
  Transfer,
  Tree,
  TreeSelect,
  Upload,
} from "antd-distinct-system";

Every visual component has an explicit wrapper in src/catalog. Base wrappers preserve AntD's exact API, refs, and compound statics while adding stable design-system marker classes. This includes General, Layout, Navigation, Data Entry, Data Display, and Feedback. See CATALOG.md for the complete coverage strategy.

Distinct components

import {
  Button,
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
  Dialog,
  FormField,
  Input,
  Select,
  Sheet,
} from "antd-distinct-system";

<Card>
  <CardHeader>
    <CardTitle>Invite a collaborator</CardTitle>
    <CardDescription>Give someone access to this workspace.</CardDescription>
  </CardHeader>
  <CardContent>
    <FormField label="Email address" required>
      <Input name="email" type="email" autoComplete="email" />
    </FormField>
  </CardContent>
  <CardFooter>
    <Button variant="outline">Cancel</Button>
    <Button>Send invitation</Button>
  </CardFooter>
</Card>

The distinct components intentionally provide our smaller product-focused API. When the original compound AntD API is needed, use the explicit escape hatches:

import {
  AntButton,
  AntCard,
  AntDrawer,
  AntDropdown,
  AntInput,
  AntModal,
  AntSelect,
  AntTable,
} from "antd-distinct-system";

<AntInput.Password />
<AntCard.Meta title="Original AntD compound API" />

Theme modes

Use mode="light", mode="dark", or mode="auto" on DesignSystemProvider. The provider applies the theme to body by default so Modal, Sheet, DropdownMenu, and Select portals remain styled. Set applyThemeToBody={false} when the host application manages these classes.

AntD underneath

These components intentionally delegate interaction and accessibility behavior to AntD. The package mirrors AntD's public exports, so consumers do not need a second component import path.

License

MIT