Skip to main contentSkip to navigation

Packages

PreviousNext

Overview of all @libreapps packages

Packages

@libreapps/ui is a monorepo containing multiple packages. Each package serves a specific purpose and can be used independently or together.

Core Packages

@libreapps/ui

The main UI component library.

npm install @libreapps/ui

Features:

  • 161+ components
  • Multi-framework support (React, Vue, Svelte, React Native)
  • Two theme variants (default, new-york)
  • 3D and AI components
  • Full TypeScript support

Exports:

import { Button, Card } from "@libreapps/ui" // React (default)

import { cn } from "@libreapps/ui/lib/utils" // Utilities
import { Button } from "@libreapps/ui/react" // Explicit React

import { Button } from "@libreapps/ui/react-native" // React Native
import { Button } from "@libreapps/ui/svelte" // Svelte
import { Button } from "@libreapps/ui/vue" // Vue 3

View Documentation

@libreapps/auth

Authentication components and utilities.

npm install @libreapps/auth

Features:

  • Login/signup components
  • Social auth buttons
  • Password reset flows
  • Multi-factor authentication
  • Session management

Usage:

import { LoginForm, SignupForm } from "@libreapps/auth"
import { useAuth } from "@libreapps/auth/hooks"

function App() {
  const { user, login, logout } = useAuth()

  return user ? (
    <Dashboard user={user} onLogout={logout} />
  ) : (
    <LoginForm onLogin={login} />
  )
}

View Auth Docs

@libreapps.commerce

E-commerce components and cart management.

npm install @libreapps.commerce

Features:

  • Product cards and listings
  • Shopping cart
  • Checkout components
  • Payment integration
  • Order management

Usage:

import { Cart, Checkout, ProductCard } from "@libreapps.commerce"
import { useCart } from "@libreapps.commerce/hooks"

function Shop() {
  const { items, addToCart, removeFromCart } = useCart()

  return (
    <div>
      <ProductCard product={product} onAddToCart={addToCart} />
      <Cart items={items} onRemove={removeFromCart} />
    </div>
  )
}

View Commerce Docs

@libreapps/brand

Branding system for white-label applications.

npm install @libreapps/brand

Features:

  • Brand configuration
  • Theme management
  • Logo components
  • Color system
  • Typography scale

Usage:

import { BrandProvider, useBrand } from "@libreapps/brand"
import { luxBrand } from "@libreapps/brand/presets/lux"

function App() {
  return (
    <BrandProvider brand={luxBrand}>
      <YourApp />
    </BrandProvider>
  )
}

View Brand Docs

@libreapps/react

Additional React utilities and hooks.

npm install @libreapps/react

Features:

  • Custom hooks
  • Context providers
  • Utility components
  • State management helpers

Usage:

import { Portal, Slot } from "@libreapps/react/components"
import { useLocalStorage, useMediaQuery } from "@libreapps/react/hooks"

function Component() {
  const [value, setValue] = useLocalStorage("key", "default")
  const isMobile = useMediaQuery("(max-width: 768px)")

  return <Portal>{isMobile && <MobileMenu />}</Portal>
}

Development Packages

@libreapps/ui-web

The documentation site and registry.

Internal package - Not published to npm.

Located in /app, this is the Next.js application that powers ui.libreapps.com.

Features:

  • Component documentation
  • Interactive examples
  • Registry builder
  • Theme generator
  • Page builder

Workspace Structure

ui/
├── pkg/
│   ├── ui/           # @libreapps/ui
│   ├── auth/         # @libreapps/auth
│   ├── commerce/     # @libreapps.commerce
│   ├── brand/        # @libreapps/brand
│   └── react/        # @libreapps/react
├── app/              # @libreapps/ui-web (docs site)
├── brands/           # Brand configurations
└── templates/        # Project templates

Installation Patterns

Install All Packages

npm install @libreapps/ui @libreapps/auth @libreapps.commerce @libreapps/brand

Install Specific Features

# Just UI components
npm install @libreapps/ui

# UI + Auth
npm install @libreapps/ui @libreapps/auth

# Full commerce stack
npm install @libreapps/ui @libreapps.commerce @libreapps/auth

Peer Dependencies

All packages require:

{
  "peerDependencies": {
    "react": "^18.0.0 || ^19.0.0",
    "react-dom": "^18.0.0 || ^19.0.0"
  }
}

Vue/Svelte packages require their respective frameworks.

Package Versions

All packages follow semantic versioning and are released together:

  • Major: Breaking changes
  • Minor: New features, backward compatible
  • Patch: Bug fixes

Check current versions:

npm info @libreapps/ui version
npm info @libreapps/auth version

TypeScript Support

All packages include TypeScript definitions:

import type { AuthUser } from "@libreapps/auth"
import type { BrandConfig } from "@libreapps/brand"
import type { CartItem } from "@libreapps.commerce"
import type { ButtonProps } from "@libreapps/ui"

Tree Shaking

All packages support tree shaking for optimal bundle sizes:

// Only imports Button code
// Tree shakes unused components
import { Button, Button, Card } from "@libreapps/ui"

// Dialog, Input, etc. not included in bundle

Bundle Sizes

Approximate gzipped sizes:

  • @libreapps/ui - 45KB (core) + components (as needed)
  • @libreapps/auth - 12KB
  • @libreapps.commerce - 18KB
  • @libreapps/brand - 8KB
  • @libreapps/react - 6KB

Source Maps

All packages include source maps for debugging:

# View source in browser DevTools
# Original TypeScript files visible

Package Scripts

Common scripts across packages:

{
  "scripts": {
    "build": "tsup",
    "dev": "tsup --watch",
    "lint": "eslint .",
    "typecheck": "tsc --noEmit",
    "test": "vitest"
  }
}

Publishing

Packages are published automatically via GitHub Actions:

# Create changeset
pnpm changeset

# Version packages
pnpm changeset version

# Publish (automated in CI)
pnpm changeset publish

Contributing

See CONTRIBUTING.md for package contribution guidelines.

Next Steps