UI Components

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

Package	Description	Audience
@dxos/react-components	A 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-ui	A 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-appkit	A set of components, pages, and layouts that are shared across DXOS-owned applications like the HALO app itself.	Applications built and operated by DXOS.

Installation

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

Note

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

With Vite

Configure the ThemePlugin in vite.config.js:

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    ThemePlugin({
      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';

createRoot(document.getElementById('root')!).render(<main></main>);

Tip

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