Web UI component library for ProfitFlex Design System
npm install @profitflex/webWeb component library for the ProfitFlex Design System. Built with RadixUI, Tailwind CSS, and TypeScript following the shadcn/ui pattern.
``bash`
npm install @profitflex/web @profitflex/tokens
This package requires React 18+:
`bash`
npm install react react-dom
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.
`tsx
import { Button } from '@profitflex/web';
function App() {
return (
);
}
`
`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 (
);
}
`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.For more information about the design system:
- Design System Documentation
- Token Documentation
- Component Guidelines
Proprietary - ProfitFlex Internal Use Only