@profitflex/web

Web component library for the ProfitFlex Design System. Built with RadixUI, Tailwind CSS, and TypeScript following the shadcn/ui pattern.

Installation

npm install @profitflex/web @profitflex/tokens

Peer Dependencies

This package requires React 18+:

npm install react react-dom

Setup

The UI package includes all necessary styles and design tokens. Simply import the styles in your app:

// In your main App.tsx or index.tsx
import '@profitflex/web/styles.css';

That's it! The styles.css includes:

All design tokens from @profitflex/tokens as CSS variables
Tailwind CSS base, components, and utilities
Component styles

No Tailwind configuration needed in your project unless you want to customize it.

Usage

Basic Example

import { Button } from '@profitflex/web';

function App() {
  return (
    <Button variant="default" size="lg">
      Click me
    </Button>
  );
}

Button Variants

import { Button } from '@profitflex/web';

export function ButtonDemo() {
  return (
    <div className="flex gap-4">
      <Button variant="default">Default</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="destructive">Destructive</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="link">Link</Button>
    </div>
  );
}

Button Sizes

import { Button } from '@profitflex/web';

export function ButtonSizes() {
  return (
    <div className="flex gap-4 items-center">
      <Button size="sm">Small</Button>
      <Button size="default">Default</Button>
      <Button size="lg">Large</Button>
      <Button size="icon">
        <svg>...</svg>
      </Button>
    </div>
  );
}

Using with Icons

import { Button } from '@profitflex/web';
import { ChevronRight } from 'lucide-react';

export function ButtonWithIcon() {
  return (
    <Button>
      Continue
      <ChevronRight />
    </Button>
  );
}

Components

Available Components

Button - Versatile button component with multiple variants and sizes

More components coming soon!

Adding New Components

This library follows the shadcn/ui pattern. You can add new components using the shadcn CLI:

cd packages/web
npx shadcn@latest add [component-name]

Development

Build the Package

npm run build

Watch Mode

npm run dev

Linting

npm run lint

Type Checking

npm run typecheck

Design Tokens Integration

This library automatically integrates with @profitflex/tokens for consistent styling across all ProfitFlex products. The tokens are applied through Tailwind CSS configuration.

Documentation

For more information about the design system:

License

Proprietary - ProfitFlex Internal Use Only