@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

• Accordion - Collapsible content panels with smooth animations
• Button - Versatile button component with multiple variants and sizes
• Card - Container component for content grouping
• Input - Text input field component

More components coming soon!

Accordion Example

import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@profitflex/web';

export function AccordionDemo() {
  return (
    <Accordion type="single" collapsible>
      <AccordionItem value="item-1">
        <AccordionTrigger>Is it accessible?</AccordionTrigger>
        <AccordionContent>
          Yes. It adheres to the WAI-ARIA design pattern.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem value="item-2">
        <AccordionTrigger>Is it styled?</AccordionTrigger>
        <AccordionContent>
          Yes. It comes with default styles that you can customize.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}

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:

• Design System Documentation
• Token Documentation
• Component Guidelines

License

Proprietary - ProfitFlex Internal Use Only