# How the @akashnetwork/ui Package Powers the Akash Console Design System

> Discover how the @akashnetwork/ui package drives the Akash Console design system with its shared React components, Tailwind CSS, and custom hooks. Ensure visual consistency across applications.

- Repository: [Akash Network/console](https://github.com/akash-network/console)
- Tags: deep-dive
- Published: 2026-02-24

---

**The @akashnetwork/ui package provides the shared React component library, Tailwind CSS styling utilities, and custom hooks that ensure visual consistency across all Akash Console applications.**

The Akash Console repository is organized as a **Turborepo monorepo** containing multiple front-end applications such as `deploy-web`, `provider-console`, and `stats-web`. Rather than duplicating UI code, these apps consume the **`@akashnetwork/ui`** package located at `packages/ui`, which serves as the single source of truth for the design system.

## Core Responsibilities of the @akashnetwork/ui Package

### Reusable Component Library Built on Radix UI

The package exports a comprehensive set of accessible UI primitives built on top of **Radix UI** and styled with **Tailwind CSS** and **class-variance-authority**. Core components include `Button`, `Input`, `Table`, `DataTable`, `Alert`, and `Popup`.

Each component lives in `packages/ui/components/**/*.tsx`. For example, the `Button` component in [`packages/ui/components/button.tsx`](https://github.com/akash-network/console/blob/main/packages/ui/components/button.tsx) implements variant and size handling through CVA (class-variance-authority), ensuring type-safe styling combinations. All components are re-exported through [`packages/ui/components/index.tsx`](https://github.com/akash-network/console/blob/main/packages/ui/components/index.tsx), allowing consuming apps to import via `@akashnetwork/ui/components`.

### Styling Infrastructure and Theming

The package centralizes the visual design tokens through [`tailwind.config.ts`](https://github.com/akash-network/console/blob/main/tailwind.config.ts) and [`styles/global.css`](https://github.com/akash-network/console/blob/main/styles/global.css). The Tailwind configuration adds the UI package to the content scanning paths, ensuring that all utility classes used in the components are generated in the final CSS bundle.

The [`styles/global.css`](https://github.com/akash-network/console/blob/main/styles/global.css) file defines CSS variables for the Akash color palette, spacing scale, and typography. Because every app in the monorepo imports these styles, the design system remains synchronized across `deploy-web`, `provider-console`, and `stats-web`.

### Utility Functions and React Hooks

The `packages/ui/utils` directory contains helper functions that simplify common front-end tasks. The **`cn` utility** in [`packages/ui/utils/cn.ts`](https://github.com/akash-network/console/blob/main/packages/ui/utils/cn.ts) merges Tailwind class strings safely using `twMerge`, preventing conflicting utility classes and ensuring predictable styling.

The `packages/ui/hooks` directory provides React hooks such as **`useToast`**. Implemented in [`packages/ui/hooks/use-toast.tsx`](https://github.com/akash-network/console/blob/main/packages/ui/hooks/use-toast.tsx), this hook provides a store-based toast system that mirrors the API of **react-hot-toast**, allowing the console to show notifications without adding a heavyweight external dependency. Additional hooks handle media queries and other responsive behaviors.

### Context Providers for Modals and Notifications

Complex UI patterns like modals and snackbars are managed through React Context providers. The **`PopupProvider`** in [`packages/ui/context/PopupProvider/PopupProvider.tsx`](https://github.com/akash-network/console/blob/main/packages/ui/context/PopupProvider/PopupProvider.tsx) exposes a programmatic API (`open`, `close`) that apps use to display confirmation dialogs and complex modals consistently.

Similarly, the **`CustomSnackbarProvider`** in [`packages/ui/context/CustomSnackbarProvider/CustomSnackbarProvider.tsx`](https://github.com/akash-network/console/blob/main/packages/ui/context/CustomSnackbarProvider/CustomSnackbarProvider.tsx) underpins the toast system, managing the snackbar lifecycle and positioning. These providers ensure that every app in the monorepo handles user interactions with identical UX patterns.

## Integration Pattern in the Monorepo

Each console application declares **`"@akashnetwork/ui": "*"`** in its [`package.json`](https://github.com/akash-network/console/blob/main/package.json) dependencies (visible in [`apps/provider-console/package.json`](https://github.com/akash-network/console/blob/main/apps/provider-console/package.json) and similar app manifests). The `"*"` specifier tells the package manager to resolve the dependency from the local workspace rather than the npm registry.

When developers import UI elements, the TypeScript path resolver points directly to the workspace package:

```tsx
import { Button, Input, Alert } from "@akashnetwork/ui/components";
import { cn } from "@akashnetwork/ui/utils";
import { useToast } from "@akashnetwork/ui/hooks";

```

Because the UI package is part of the same monorepo, changes to [`packages/ui/components/button.tsx`](https://github.com/akash-network/console/blob/main/packages/ui/components/button.tsx) trigger **instant hot-reloading** in the consuming apps. This tight feedback loop accelerates development and ensures that visual updates propagate immediately to `deploy-web`, `provider-console`, and `stats-web`.

## Code Examples

### Importing and Using Components

The following example demonstrates importing the `Button`, `Input`, and `Alert` components, along with the `cn` utility for conditional styling:

```tsx
import { Button, Input, Alert } from "@akashnetwork/ui/components";
import { cn } from "@akashnetwork/ui/utils";

export function Example() {
  return (
    <div className={cn("p-4", "max-w-md")}>
      <Alert variant="info" className="mb-4">
        Welcome to the Akash Console!
      </Alert>

      <Input placeholder="Enter name" className="mb-2" />

      <Button onClick={() => alert("Clicked!")} variant="primary">
        Submit
      </Button>
    </div>
  );
}

```

*Source reference:* Components are exported from [`packages/ui/components/index.tsx`](https://github.com/akash-network/console/blob/main/packages/ui/components/index.tsx) ([source](https://github.com/akash-network/console/blob/main/packages/ui/components/index.tsx)).

### Merging Tailwind Classes with the `cn` Utility

The `cn` helper prevents class conflicts when combining dynamic Tailwind utilities:

```tsx
import { cn } from "@akashnetwork/ui/utils";

const classes = cn(
  "flex items-center",
  isActive && "bg-primary text-primary-foreground",
  customClass
);

```

*Source reference:* Implementation in [`packages/ui/utils/cn.ts`](https://github.com/akash-network/console/blob/main/packages/ui/utils/cn.ts) ([source](https://github.com/akash-network/console/blob/main/packages/ui/utils/cn.ts)).

### Displaying Notifications with `useToast`

The `useToast` hook provides a lightweight toast system without external dependencies:

```tsx
import { useToast } from "@akashnetwork/ui/hooks";

export function SaveButton() {
  const { toast } = useToast();

  const handleSave = async () => {
    // ...save logic
    toast({
      title: "Saved",
      description: "Your changes have been stored.",
      variant: "success"
    });
  };

  return <Button onClick={handleSave}>Save</Button>;
}

```

*Source reference:* Hook implementation in [`packages/ui/hooks/use-toast.tsx`](https://github.com/akash-network/console/blob/main/packages/ui/hooks/use-toast.tsx) ([source](https://github.com/akash-network/console/blob/main/packages/ui/hooks/use-toast.tsx)).

### Managing Modals with `PopupProvider`

The `PopupProvider` context enables programmatic modal control:

```tsx
import { useContext } from "react";
import { PopupContext } from "@akashnetwork/ui/context/PopupProvider";

export function DeleteItem() {
  const { open } = useContext(PopupContext);

  const confirmDelete = () => {
    open({
      title: "Delete item?",
      description: "This action cannot be undone.",
      actions: [
        { label: "Cancel", onClick: () => {} },
        {
          label: "Delete",
          variant: "destructive",
          onClick: () => {
            // delete logic
            open(null); // close
          }
        }
      ]
    });
  };

  return <Button onClick={confirmDelete}>Delete</Button>;
}

```

*Source reference:* Provider implementation in [`packages/ui/context/PopupProvider/PopupProvider.tsx`](https://github.com/akash-network/console/blob/main/packages/ui/context/PopupProvider/PopupProvider.tsx) ([source](https://github.com/akash-network/console/blob/main/packages/ui/context/PopupProvider/PopupProvider.tsx)).

## Key Files in the @akashnetwork/ui Package

| File | Purpose | Source Link |
|------|---------|-------------|
| [`packages/ui/package.json`](https://github.com/akash-network/console/blob/main/packages/ui/package.json) | Declares package exports and workspace dependencies | [View source](https://github.com/akash-network/console/blob/main/packages/ui/package.json) |
| [`packages/ui/components/index.tsx`](https://github.com/akash-network/console/blob/main/packages/ui/components/index.tsx) | Central export point for all UI components | [View source](https://github.com/akash-network/console/blob/main/packages/ui/components/index.tsx) |
| [`packages/ui/components/button.tsx`](https://github.com/akash-network/console/blob/main/packages/ui/components/button.tsx) | Core Button component with variant handling | [View source](https://github.com/akash-network/console/blob/main/packages/ui/components/button.tsx) |
| [`packages/ui/components/input.tsx`](https://github.com/akash-network/console/blob/main/packages/ui/components/input.tsx) | Standard text input field | [View source](https://github.com/akash-network/console/blob/main/packages/ui/components/input.tsx) |
| [`packages/ui/components/alert/alert.tsx`](https://github.com/akash-network/console/blob/main/packages/ui/components/alert/alert.tsx) | Alert/notification banner component | [View source](https://github.com/akash-network/console/blob/main/packages/ui/components/alert/alert.tsx) |
| [`packages/ui/hooks/use-toast.tsx`](https://github.com/akash-network/console/blob/main/packages/ui/hooks/use-toast.tsx) | Toast notification hook | [View source](https://github.com/akash-network/console/blob/main/packages/ui/hooks/use-toast.tsx) |
| [`packages/ui/utils/cn.ts`](https://github.com/akash-network/console/blob/main/packages/ui/utils/cn.ts) | Tailwind class merging utility | [View source](https://github.com/akash-network/console/blob/main/packages/ui/utils/cn.ts) |
| [`packages/ui/context/PopupProvider/PopupProvider.tsx`](https://github.com/akash-network/console/blob/main/packages/ui/context/PopupProvider/PopupProvider.tsx) | Modal management context | [View source](https://github.com/akash-network/console/blob/main/packages/ui/context/PopupProvider/PopupProvider.tsx) |
| [`packages/ui/context/CustomSnackbarProvider/CustomSnackbarProvider.tsx`](https://github.com/akash-network/console/blob/main/packages/ui/context/CustomSnackbarProvider/CustomSnackbarProvider.tsx) | Snackbar provider for toasts | [View source](https://github.com/akash-network/console/blob/main/packages/ui/context/CustomSnackbarProvider/CustomSnackbarProvider.tsx) |
| [`packages/ui/tailwind.config.ts`](https://github.com/akash-network/console/blob/main/packages/ui/tailwind.config.ts) | Tailwind configuration for the design system | [View source](https://github.com/akash-network/console/blob/main/packages/ui/tailwind.config.ts) |
| [`packages/ui/styles/global.css`](https://github.com/akash-network/console/blob/main/packages/ui/styles/global.css) | Global CSS variables and design tokens | [View source](https://github.com/akash-network/console/blob/main/packages/ui/styles/global.css) |

## Summary

- The **@akashnetwork/ui** package serves as the centralized design system for the Akash Console monorepo, eliminating UI duplication across `deploy-web`, `provider-console`, and `stats-web`.
- It provides **accessible React components** built on Radix UI primitives, styled with Tailwind CSS and managed via class-variance-authority for type-safe variants.
- The package includes essential **utility functions** like `cn` for Tailwind class merging and **React hooks** like `useToast` for lightweight notifications.
- **Context providers** such as `PopupProvider` and `CustomSnackbarProvider` enable consistent modal and snackbar management across all console applications.
- By declaring `"@akashnetwork/ui": "*"` in app dependencies, the monorepo achieves **instant hot-reloading** and guaranteed visual consistency through a single source of truth.

## Frequently Asked Questions

### What is the @akashnetwork/ui package?

The **@akashnetwork/ui** package is an internal workspace package located at `packages/ui` in the Akash Console repository. It functions as a shared design system that provides React components, styling utilities, hooks, and context providers to all front-end applications in the monorepo, ensuring they share the same visual language and interaction patterns.

### How does @akashnetwork/ui differ from other UI libraries?

Unlike generic third-party libraries, **@akashnetwork/ui** is specifically tailored for the Akash Console ecosystem. While it builds upon foundational libraries like **Radix UI** for accessibility primitives and **Tailwind CSS** for styling, it encapsulates Akash-specific design tokens, component variants, and business logic (such as the `useToast` hook and `PopupProvider`) that are optimized for the console's user experience.

### Can I use @akashnetwork/ui outside of Akash Console?

Technically, the package is published as part of the monorepo and consumed via workspace references (`"*"`). While the code is open source under the Akash Network repository, it is not distributed as a standalone npm package for external consumption. Developers looking to replicate the console's UI should reference the component patterns in `packages/ui/components` rather than installing the package directly.

### How are Tailwind classes optimized across the monorepo?

The **@akashnetwork/ui** package includes a [`tailwind.config.ts`](https://github.com/akash-network/console/blob/main/tailwind.config.ts) that adds the UI components to Tailwind's content scanning paths. When individual apps like `deploy-web` or `provider-console` build their bundles, Tailwind's JIT (Just-In-Time) engine scans both the app's source and the UI package's components, generating only the CSS classes actually used. This keeps final bundles lean while allowing tree-shaking of unused components.