@profitflex/web

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

Installation

``bash
npm install @profitflex/web @profitflex/tokens
`

$3

This package requires React 18+:

`bash
npm install react react-dom
`

$3

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

`tsx
// 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

$3

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

function App() {
return (

Click me

);
}
`

$3

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

export function ButtonDemo() {
return (



);
}
`

$3

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

export function ButtonSizes() {
return (



);
}
`

$3

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

export function ButtonWithIcon() {
return (

Continue


);
}
`

Components

$3

- 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!

$3

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

export function AccordionDemo() {
return (


Is it accessible?

Yes. It adheres to the WAI-ARIA design pattern.



Is it styled?

Yes. It comes with default styles that you can customize.



);
}
`

Adding New Components

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

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

Development

$3

`bash
npm run build
`

$3

`bash
npm run dev
`

$3

`bash
npm run lint
`

$3

`bash
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