Introduction
Mordecai is a CMS-ready design system built with React, Tailwind CSS, and Base UI. Components are designed to work seamlessly with Payload CMS while remaining flexible for any React application.
Features
- shadcn/ui Foundation — Built on shadcn/ui with Base UI primitives for accessible, customizable components.
- CMS Integration — Components include Payload CMS field helpers for content editor configuration.
- Design Tokens — Consistent theming through CSS variables. Customize everything from one place.
- Accessibility — Built on Base UI with full ARIA compliance and keyboard navigation.
- Localization — EN/FR support built into CMS schemas for multilingual sites.
Architecture
The design system uses a simple, flat structure:
@corew500/ui
All UI components in a single package. Built with shadcn/ui CLI and Base UI primitives.
@corew500/cms-payload
Payload CMS field helpers and adapters for connecting UI components to CMS content.