UI Components

Less than 1 minute

UI Components

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

PackageDescriptionAudience
@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.

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 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: [
    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.