@dailyautomations/ui

Daily X UI component library - Purple/orange dark theme system for all Daily products.

Installation

npm install @dailyautomations/ui

Peer Dependencies

npm install react react-dom tailwindcss@^4.0.0 @radix-ui/react-slot @radix-ui/react-dialog @radix-ui/react-select @radix-ui/react-checkbox @radix-ui/react-label @radix-ui/react-tabs @radix-ui/react-toast

Setup (Tailwind v4)

1. Import the styles in your CSS

In your app/globals.css or main CSS file:

@import "tailwindcss";
@import "@dailyautomations/ui/styles/globals.css";

That's it! The globals.css includes:

• CSS variables for all theme colors
• @theme inline directive for Tailwind v4
• Base styles and keyframe animations

2. Use components and utilities

import { Button, Card, Input, Label } from "@dailyautomations/ui"
import { cn } from "@dailyautomations/ui/utils"
import { useToast } from "@dailyautomations/ui/hooks"

function MyComponent() {
  const { toast } = useToast()

  return (
    <Card className="p-6">
      <Label htmlFor="email">Email</Label>
      <Input id="email" placeholder="[email protected]" />
      <Button onClick={() => toast({ title: "Saved!" })}>
        Submit
      </Button>
    </Card>
  )
}

Alternative: Custom CSS Setup

If you need more control over your CSS structure, import the pieces separately:

@import "tailwindcss";
@import "@dailyautomations/ui/styles/variables.css";

/* Copy @theme block from @dailyautomations/ui/styles/theme.css */
@theme inline {
  --color-primary: rgb(var(--primary));
  /* ... see theme.css for full list */
}

Legacy Setup (Tailwind v3)

For Tailwind v3 projects, use the preset approach:

// tailwind.config.ts
import type { Config } from "tailwindcss"
import dailyPreset from "@dailyautomations/ui/tailwind-preset"

const config: Config = {
  presets: [dailyPreset],
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@dailyautomations/ui/dist/**/*.{js,ts,jsx,tsx}",
  ],
}

export default config

And import the CSS:

@import "@dailyautomations/ui/styles/variables.css";
@tailwind base;
@tailwind components;
@tailwind utilities;

Theme Colors

Primary (Purple - Brand Identity)

• bg-primary - #8B5CF6
• text-primary-foreground - White text on primary
• bg-primary-hover - Hover state

Accent (Orange - CTAs)

• bg-accent - #F97316 (Primary buttons)
• bg-accent-hover - Hover state
• bg-accent-active - Active state

Background (Dark)

• bg-background - #0F0F14 (Page background)
• bg-card - Card surfaces
• bg-popover - Elevated surfaces

Semantic Colors

• Success: bg-success, text-success-foreground
• Error: bg-error, text-error-foreground
• Warning: bg-warning, text-warning-foreground
• Info: bg-info, text-info-foreground

Components

Common

• Button - Primary (orange), secondary (purple), outline, ghost, destructive, link
• Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter
• Input - Text input with focus states
• Label - Form labels
• Checkbox - With checked indicator

UI (Radix-based)

• Dialog - Modal dialogs
• Select - Dropdown select
• Tabs - Tab navigation
• Toast - Notifications (success, error, info, warning)

Feedback

• Skeleton - Loading placeholders
• Spinner - Loading indicator

Animations

import { fadeInUp, staggerChildren, scaleIn } from "@dailyautomations/ui/animations"

// Use with framer-motion
<motion.div variants={fadeInUp} initial="initial" animate="animate">
  Content
</motion.div>

Available: fadeIn, fadeInUp, fadeInDown, scaleIn, slideInLeft, slideInRight, staggerChildren

Hooks

import { useToast, toast } from "@dailyautomations/ui/hooks"

// Hook usage
const { toast } = useToast()
toast({ title: "Success", variant: "success" })

// Direct function
toast({ title: "Error", description: "Something went wrong", variant: "error" })

Documentation

• BRAND.md - Brand guidelines, colors, typography, voice & tone
• PAGE_STRUCTURES.md - Page templates, layouts, navigation patterns

Development

# Build
npm run build

# Watch mode
npm run watch

# Preview components
npm run preview

# Type check
npm run typecheck

# Lint
npm run lint

# Test
npm run test

License

MIT