Skip to main content

​
Overview

This module provides general-purpose utility functions used throughout the BudgetView application. Module: lib/utils.ts

​
cn

Utility function for conditionally joining class names together, merging Tailwind CSS classes intelligently.

​
Function Signature

function cn(...inputs: ClassValue[]): string

​
Parameters

​
inputs
ClassValue[]
required
Variable number of class values to merge. Accepts strings, objects, arrays, or any type supported by clsx

​
Returns

​
className
string
A merged string of class names with conflicts resolved by tailwind-merge

​
Examples

import { cn } from "@/lib/utils"

const className = cn("px-4 py-2", "bg-blue-500")
// Result: "px-4 py-2 bg-blue-500"

​
How It Works

The cn function combines two powerful utilities:
  1. clsx - Constructs className strings conditionally, supporting:
    • Strings: "foo bar"
    • Objects: { foo: true, bar: false } → "foo"
    • Arrays: ["foo", { bar: true }] → "foo bar"
    • Mixed: Any combination of the above
  2. tailwind-merge - Intelligently merges Tailwind CSS classes:
    • Removes duplicate utilities
    • Resolves conflicts (last class wins)
    • Handles responsive variants
    • Supports arbitrary values
This is the standard utility function used in shadcn/ui components. It’s essential for creating flexible, composable React components with Tailwind CSS.

​
Common Patterns

// Pattern: base classes + variant classes + user className
const className = cn(
  "base-class another-base",  // Always applied
  variantClasses,              // From props/config
  userClassName                // User override
)

​
Wallet Utilities

Constants and helper functions for working with wallet identifiers. Module: lib/wallets.ts

​
Constants

​
GLOBAL_WALLET_ID
string
Constant identifier for the global wallet: "global"
​
GLOBAL_WALLET_LABEL
string
Display label for the global wallet: "Global"

​
isGlobalWallet

Checks if a wallet ID represents the global wallet.

​
Function Signature

function isGlobalWallet(walletId?: string | null): boolean

​
Parameters

​
walletId
string | null | undefined
The wallet ID to check

​
Returns

​
isGlobal
boolean
true if the wallet ID is the global wallet, false otherwise

​
Examples

import { isGlobalWallet, GLOBAL_WALLET_ID } from "@/lib/wallets"

if (isGlobalWallet(walletId)) {
  console.log("This is the global wallet")
}

​
Usage Throughout BudgetView

These utilities are used extensively across the application:

​
cn Function Usage

  • UI Components: All shadcn/ui components use cn for class merging
  • Custom Components: Header, Sidebar, Forms, and layout components
  • Responsive Design: Combining base, responsive, and conditional classes
  • Theme Variants: Applying theme-aware classes dynamically

​
Currency Functions Usage

  • Dashboard: Displaying account balances in USD and VES
  • Transactions Page: Formatting transaction amounts
  • Budgets Page: Showing budget limits and spent amounts
  • Wallets Page: Displaying wallet balances with exchange rates
  • Export Page: Including formatted amounts in exported data
  • Header Component: Real-time balance display with BCV rates
The cn function is re-exported from lib/utils.ts and is imported in over 100 files throughout the codebase, making it one of the most frequently used utilities in BudgetView.

Build docs developers (and LLMs) love

Get started for freeTalk to us