UI Components

Less than 1 minute

UI Components

There are several open-source packages of UI components available:

@dxos/react-componentsA set of pure components and tokens like colors and sizes that form a UI system based on radix, phosphor, react, and tailwind.Any react application.
@dxos/react-shellA set of components, pages, layouts and specific user workflows for working with ECHO spaces, invitations, and join-flows. Depends on @dxos/react-components.Any react application using ECHO and HALO.
@dxos/react-appkitA set of components, pages, and layouts that are shared across DXOS-owned applications like the HALO app itself.Applications built and operated by DXOS.


To use components from any of the packages above, the main theme stylesheet needs to be imported from @dxos/react-components.


Apps based on the DXOS application templates have DXOS UI Components built-in by default.

With Viteopen in new window

Configure the ThemePlugin in vite.config.jsopen in new window:

import { defineConfig } from 'vite';
import { resolve } from 'node:path';
import { ThemePlugin } from '@dxos/aurora-theme/plugin';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
      content: [
        resolve(__dirname, './index.html'),
        resolve(__dirname, './src/**/*.{js,ts,jsx,tsx}')

The content array should contain globs that match any other code which will contain tailwind css classes.

Import the special DXOS theme stylesheet @dxosTheme anywhere in code such as main.tsx:

import '@dxosTheme';
import React from 'react';
import { createRoot } from 'react-dom/client';



For best results, load @dxosTheme ahead of any other stylesheets.