Skip to main content
Version: v2.x

UI Overrides

In this example, we demonstrate how to override certain UI elements in the NLUX chat interface using JSX syntax.

Loader Component Overrides

In this example, we override the default NLUX loader component with a custom loader component provided via JSX.

import { AiChat, AiChatUI, useAsStreamAdapter } from '@nlux/react';
import '@nlux/themes/nova.css';

import { send } from './send';
import { personas } from './personas';

export default () => {
  const adapter = useAsStreamAdapter(send, []);
  return (
    <AiChat
      conversationOptions={{ layout: 'bubbles' }} personaOptions={ personas }
      displayOptions={{ colorScheme: 'dark' }}
      adapter={ adapter }
    >
      <AiChatUI.Loader>
        <span className="rounded">Loading 🪐</span>
      </AiChatUI.Loader>
    </AiChat>
  );
};

Reference Documentation for UI Overrides