A two-tier React component architecture for building accessible design systems.
Bento (@bento/*) provides unstyled accessibility primitives built on React Aria. Antares (@godaddy/antares) provides the styled GoDaddy design system built on top of Bento. The monorepo is managed by Nx.
packages/@bento/*/ # Unstyled accessibility primitives
packages/@godaddy/antares/ # Styled design system
packages/@godaddy/design-tokens/ # Design tokens (SCSS, CSS-in-JS, classnames, DTCG)
packages/@godaddy/generate-cdn-url/ # CDN URL generator for GoDaddy assets
packages/dev/ # Dev tooling (storybook-addon-helpers, environment)
apps/docs/ # Storybook documentation
apps/site/ # Documentation site (Next.js)
configs/ # Shared build and test configs
- antares - The GoDaddy design component library built on Bento primitives
- design-tokens - Design tokens in SCSS, CSS-in-JS, classnames, and DTCG formats
- generate-cdn-url - Generates CDN URLs for GoDaddy assets
- box - React context for passing configuration through component tree
- button - Button component with press interactions and disabled states
- checkbox - Checkbox controls supporting single, grouped, and indeterminate selections
- container - Polymorphic component that renders as any HTML element via
asprop - dismiss - Visually hidden, focusable dismissal control for accessible modal dismissal
- divider - Horizontal or vertical content separator
- field-error - Error messages for form controls such as RadioGroup or CheckboxGroup
- focus-lock - Focus management primitive for containing and controlling focus within a scope
- heading - Heading component with automatic level tracking through nesting
- icon - Icon component with lazy loading and sprite mode
- illustration - SVG illustration component with rotation and flip support
- input - Universal input primitive supporting all HTML input types
- listbox - List selection primitive for building Select, Combobox, and Menu
- overlay - Overlay primitive for modals, drawers, and popups
- portal - Render children into a target DOM container outside the component hierarchy
- pressable - Make any element clickable with keyboard and interaction state support
- radio - Radio button controls with single-selection group management
- text - Text component with alignment, wrapping, and line clamping
- visually-hidden - Content accessible to screen readers while visually hidden from sighted users
- scroll-lock - Prevent document scrolling while exposing Bento debugging hooks
- use-data-attributes - Expose component state to DOM via data attributes for CSS styling
- use-props - Unify component and slot-based props with render prop support
- use-svg-sprite - Optimize repeated SVG usage by registering icons into shared sprite
- create-external-store - Low-level external store for useSyncExternalStore hook integration
- error - Enhanced error objects with documentation links and support information
- forward - React 19-compatible forwardRef utility
- internal-props - Internal prop passing mechanism bypassing slot system restrictions
- slots - Enable infinite component customization without exposing individual props
- svg-parser - Parse SVG strings into React elements with custom node transformations
- to-attribute-value - Serialize JavaScript values into HTML attribute-compatible strings
- types - Centralized TypeScript type definitions shared across Bento packages
- storybook-addon-helpers - Auto-generate Storybook metadata from TypeScript types and JSDoc
- environment - Setup a custom environment for your Bento application
See individual package READMEs for installation and usage instructions.
Documentation is powered by Storybook and a Next.js docs site.
Storybook — interactive component explorer:
npm run storybookDocs site — full documentation site:
npm run siteStorybook is configured to automatically scan packages/** for .mdx and .stories.{ts|tsx} files, so documentation is co-located with the code.
Examples should be placed in each package's examples folder as individual component exports. This allows reuse in both Storybook documentation and tests.
The registry makes blocks installable as source files that you can adapt in your application. Regenerate it when blocks, their titles, or their implementation file lists change:
npm run registry:build
npm run registry:validateReview and commit the generated registry with the source changes. Validation checks its schema; keeping its entries current remains the contributor's responsibility.
- Node.js >= 24
- npm >= 11
# Clone the repository
git clone https://github.com/godaddy/antares.git
cd antares
# Install dependencies
npm install
# Build all packages
npm run build
# Run tests
npm run testRun and debug component tests right from your editor with the Vitest extension (vitest.explorer). The workspace .vscode/settings.json already points the extension at @godaddy/antares and keeps it focused on the SSR and Browser projects, so your test runs stay quick — just install the recommended extension and reload the window.
The repo is configured only to accept conventional commits as commit syntax.
This is enforced using @commitlint.
When contributing changes to packages, you must include a changeset:
npm run changesetSelect the affected packages, choose the version bump type (patch/minor/major), and write a description using conventional commit syntax (e.g., "fix: resolve issue", "feat: add feature", "docs: update readme").
Note: Documentation changes in packages should use patch version bumps with
a docs: prefix, as they improve the published package for consumers and AI tooling.
The Changeset Bot will automatically comment on pull requests to remind you if a changeset is needed.
We welcome contributions from the community! Please read our Contributing Guide to get started.
MIT License - Copyright (c) 2025 GoDaddy Operating Company, LLC.
See LICENSE.md for details.