Antares

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.

Repository Structure

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

Packages

@godaddy

• 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

@bento Components

• 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 as prop
• 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

@bento Hooks

• 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

@bento Utilities

• 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

Dev Tooling

• storybook-addon-helpers - Auto-generate Storybook metadata from TypeScript types and JSDoc
• environment - Setup a custom environment for your Bento application

Getting Started

See individual package READMEs for installation and usage instructions.

Documentation

Documentation is powered by Storybook and a Next.js docs site.

Storybook — interactive component explorer:

npm run storybook

Docs site — full documentation site:

npm run site

Storybook 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.

Development

Prerequisites

• Node.js >= 24
• npm >= 11

Setup

# 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 test

Vitest in VS Code or Cursor

Run 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.

Conventional Commits

The repo is configured only to accept conventional commits as commit syntax. This is enforced using @commitlint.

Changesets

When contributing changes to packages, you must include a changeset:

npm run changeset

Select 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.

Contributing

We welcome contributions from the community! Please read our Contributing Guide to get started.

License

MIT License - Copyright (c) 2025 GoDaddy Operating Company, LLC.

See LICENSE.md for details.