Skip to main content

Packages/Tools

COMET DXP Package Overview

A COMET DXP application, at a minimum, consists of the following packages:

  • Admin: The user interface for managing the data and content of your application
  • API: Stores the data of your application and provides APIs for Admin, Site, and potentially others
  • Site: The frontend that renders the content of your application as a website

Admin

The Admin's user interface is built using MUI, react-final-form, react-router, and the @comet/admin library, which provides commonly used components and tools for creating forms, UI, and data visualization.

@comet/admin

note

Documentation and usage examples of the individual components and tools from @comet/admin and its accompanying packages can be found in our Storybook: Storybook

This is the core package that is used to build your Admin. Together with its accompanying packages @comet/admin-*, it provides components and tools for creating and managing the Admin's UI, routing, forms, and more.

Components for use in forms generally have an accompanying component, optimized for use with react-final-form, indicated by the component's name being prefixed with "FinalForm".

Navigation and routing are managed by react-router.

@comet/admin-theme

Using the createCometTheme function, you can create a theme that contains all the default styling for your admin. Custom options and styles can be added the same way as with MUI's createTheme function. The resulting theme can simply be used with MUI's ThemeProvider.

@comet/admin-icons

Provides a set of icon components, based on MUI's SvgIcon component. A complete list of the admin-icons can be found here: Storybook

@comet/admin-rte

Provides a customizable rich-text-editor component to allow advanced formatting of text.

@comet/admin-react-select

Provides a set of select components for use in forms, built with react-final-form.

@comet/admin-date-time

Provides components for selecting date and time or a range or combination of date and time.

@comet/admin-color-picker

Provides a component for selecting colors in forms, built with react-final-form.