Usage Guide

Complete guide to installing and using Tempo UI components in your projects.

Dark Mode Only

Private Package

TypeScript Ready

Installation

1. Create .npmrc file

Set up GitHub Packages authentication

@mickey:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=YOUR-GITHUB-TOKEN

Replace YOUR-GITHUB-TOKEN with a GitHub Personal Access Token that has read:packages scope.

2. Install the package

Add Tempo UI to your project

npm install @mickey/tempo-ui

3. Install required dependencies

Theme provider for dark mode

npm install next-themes

Configuration

Tailwind CSS Setup

Configure Tailwind to include Tempo UI styles

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    // Add this line
    "./node_modules/@mickey/tempo-ui/dist/**/*.{js,ts,jsx,tsx}",
  ],
  // ... rest of config
}

Import CSS Variables

Add to your global CSS file

@import "@mickey/tempo-ui/dist/index.css";

Dark Mode Theme Provider

Required setup for app/layout.tsx or pages/_app.tsx

import { ThemeProvider } from 'next-themes'

export default function RootLayout({ children }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <ThemeProvider 
          attribute="class" 
          forcedTheme="dark"
          defaultTheme="dark"
        >
          {children}
        </ThemeProvider>
      </body>
    </html>
  )
}

Usage Examples

Basic Component Usage

Import and use components in your React components

import { Button, Card, Badge } from '@mickey/tempo-ui'

export default function MyComponent() {
  return (
    <Card>
      <Button variant="brand">Click me</Button>
      <Badge variant="success">New Feature</Badge>
    </Card>
  )
}

Form Components

Building forms with glassmorphism styling

import { 
  Card, CardContent, CardHeader, CardTitle,
  Input, Label, Button, Checkbox 
} from '@mickey/tempo-ui'

export default function LoginForm() {
  return (
    <Card className="w-full max-w-sm">
      <CardHeader>
        <CardTitle>Login</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="space-y-2">
          <Label htmlFor="email">Email</Label>
          <Input id="email" type="email" placeholder="name@example.com" />
        </div>
        <div className="space-y-2">
          <Label htmlFor="password">Password</Label>
          <Input id="password" type="password" />
        </div>
        <div className="flex items-center space-x-2">
          <Checkbox id="remember" />
          <Label htmlFor="remember">Remember me</Label>
        </div>
        <Button className="w-full" variant="brand">
          Sign In
        </Button>
      </CardContent>
    </Card>
  )
}

Toast Notifications

Using the toast system for notifications

import { useToast, Toaster, Button } from '@mickey/tempo-ui'

export default function NotificationExample() {
  const { toast } = useToast()

  return (
    <div>
      <Toaster />
      <Button
        onClick={() => {
          toast({
            title: "Success!",
            description: "Your changes have been saved.",
            variant: "success",
          })
        }}
      >
        Show Success Toast
      </Button>
    </div>
  )
}

Available Components

Form Components

Button - default | brand | success | destructive | outline | secondary | ghost | link
Input - Text inputs with glassmorphism
Label - Form labels
Checkbox - Custom checkboxes
Switch - Toggle switches
Select - Dropdown selects

Layout Components

Card - Content containers with glass effect
Separator - Visual dividers
Tabs - Tabbed navigation
Table - Data tables
Dialog - Modal dialogs

Feedback Components

Badge - default | secondary | destructive | outline | success | brand
Toast - Notifications with icons
Tooltip - Hover information

Navigation Components

DropdownMenu - Context menus
ThemeToggle - Dark mode indicator

Updating Components

Check for Updates

Keep your components up to date

# Check for updates
npm outdated

# Update to latest
npm update @mickey/tempo-ui

# Update to specific version
npm install @mickey/tempo-ui@1.2.3

Semantic Versioning:

• Major (1.0.0): Breaking changes
• Minor (1.1.0): New features, backward compatible
• Patch (1.1.1): Bug fixes, backward compatible