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

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 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, allowing consuming apps to import via @akashnetwork/ui/components.

Styling Infrastructure and Theming

The package centralizes the visual design tokens through tailwind.config.ts and 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 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 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, 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 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 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 dependencies (visible in 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:

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

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 (source).

Merging Tailwind Classes with the cn Utility

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

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 (source).

Displaying Notifications with useToast

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

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 (source).

Managing Modals with PopupProvider

The PopupProvider context enables programmatic modal control:

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 (source).

Key Files in the @akashnetwork/ui Package

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

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

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}