Installation

Get started with ASH UI in your React project. Supports React 18+ with TypeScript.

Install the Package

Install @ash-cloud/ash-ui using your preferred package manager:

npm

npm install @ash-cloud/ash-ui

pnpm

pnpm add @ash-cloud/ash-ui

yarn

yarn add @ash-cloud/ash-ui

Setup

Import the Styles

Import the stylesheet in your app's entry point. Choose the version that fits your project:

RecommendedFor sites with existing Tailwind CSS

app.tsx

import '@ash-cloud/ash-ui/styles.css';

No preflight/reset included. Works alongside your existing Tailwind setup without conflicts.

For standalone apps without Tailwind

app.tsx

import '@ash-cloud/ash-ui/styles-full.css';

Includes Tailwind's preflight CSS reset. Use this if you don't have Tailwind in your project.

Wrap with ThemeProvider

The ThemeProvider manages dark/light mode and persists the user's preference to localStorage.

app.tsx

import { ThemeProvider } from '@ash-cloud/ash-ui';

function App() {
  return (
    <ThemeProvider defaultTheme="dark" storageKey="ash-theme">
      {/* Your app content */}
    </ThemeProvider>
  );
}

Use Components

Import and use components in your application:

ChatInterface.tsx

import {
  MessageList,
  ToolCallCard,
  StatusIndicator,
  StreamingText,
} from '@ash-cloud/ash-ui';

function ChatInterface({ entries, isStreaming, streamContent }) {
  return (
    <div className="flex flex-col h-full">
      <MessageList
        entries={entries}
        loading={false}
        streamingContent={isStreaming ? streamContent : undefined}
      />
    </div>
  );
}

Peer Dependencies

ASH UI has minimal peer dependencies:

Package	Version	Required
react	^18.0.0	Required
react-dom	^18.0.0	Required

Package Exports

ASH UI provides multiple entry points for different use cases:

imports.ts

// Main components
import {
  MessageList,
  ToolCallCard,
  StatusIndicator,
  // ... all components
} from '@ash-cloud/ash-ui';

// Icons only
import { TerminalIcon, FileIcon, SearchIcon } from '@ash-cloud/ash-ui/icons';

// Type definitions
import type { NormalizedEntry, NormalizedToolCall } from '@ash-cloud/ash-ui/types';

// Utility functions
import { formatToolName, createToolCall } from '@ash-cloud/ash-ui/utils';

// Stylesheet (no preflight, for sites with existing Tailwind)
import '@ash-cloud/ash-ui/styles.css';

// Stylesheet (with preflight, for standalone apps)
import '@ash-cloud/ash-ui/styles-full.css';

Tailwind CSS (Optional)

ASH UI works without Tailwind, but if you're using Tailwind and want to customize the theme, add our preset to your config:

tailwind.config.js

module.exports = {
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/@ash-cloud/ash-ui/**/*.js',
  ],
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        accent: {
          DEFAULT: '#ccff00',
          500: '#b8e600',
        },
        surface: {
          dark: '#0a0a0a',
          card: '#0c0c0c',
          elevated: '#111111',
        },
      },
    },
  },
};

You're Ready!

ASH UI is now installed. Start building your agent interface with our components.

Browse Components View Examples