DashFlowX Documentation

Welcome to DashFlowX, a comprehensive component library built with React and TypeScript. This documentation provides everything you need to get started with our modern, accessible, and customizable UI components.

Get up and running with DashFlowX in minutes:

npm install @dashflowx/core

import { Button, Card, Input } from '@dashflowx/core';

function App() {
  return (
    <div>
      <Card>
        <h2>Welcome to DashFlowX</h2>
        <Input placeholder="Enter your name" />
        <Button variant="primary" color="primary">Get Started</Button>
      </Card>
    </div>
  );
}

DashFlowX supports comprehensive theming through Tailwind Config:

...
content: [
    ...
    './node_modules/@dashflowx/core/**/*.{js,ts,jsx,tsx}',
    './node_modules/@dashflowx/ui/**/*.{js,ts,jsx,tsx}',
  ],
...
extend: {
      background: 'hsl(var(--color-background))',
      colors: {
        primary: {
          light: '#2561a2',
          dark: '#a3d1ff',
        },
        secondary: {
          light: '#ffa37e',
          dark: '#ffd3c2',
        },
        accent: {
          light: '#b23840',
          dark: '#fd5863',
        },
        bgcolor: {
          light: '#f8f9f5',
          dark: '#1b1d1c',
        },
      },
      keyframes: {
        wiggle: {
          '0%, 100%': { transform: 'rotate(-3deg)' },
          '50%': { transform: 'rotate(3deg)' },
        },
      },
      animation: {
        wiggle: 'pulse 500ms ease-in-out',
      },
    },
...

• 🎨 Modern Design: Clean, professional components with beautiful styling
• ♿ Accessible: Built with accessibility in mind, following WCAG guidelines
• 🌙 Dark Mode: Full dark mode support out of the box
• 📱 Responsive: Mobile-first design that works on all devices
• 🔧 Customizable: Extensive theming and customization options
• ⚡ Performance: Optimized for speed and efficiency
• 📦 Tree Shakeable: Import only what you need
• 🎯 TypeScript: Full TypeScript support with comprehensive type definitions

Build beautiful forms with our comprehensive form components:

• Button - Various button styles and sizes
• Input - Text inputs with validation states
• TextArea - Multi-line text input
• Select - Dropdown selection components
• Checkbox - Checkbox inputs with custom styling
• Radio Group - Radio button groups
• Switch - Toggle switches
• Slider - Range and value sliders
• Date Picker - Date selection component
• Input OTP - One-time password input

Structure your application with our layout components:

• Card - Content containers with headers, bodies, and footers
• Grid - Responsive grid system
• Separator - Visual dividers
• Resizable - Resizable panels and layouts
• Scroll Area - Custom scrollable areas
• Sheet - Slide-out panels
• Drawer - Mobile-friendly drawers

Create intuitive navigation experiences:

• Breadcrumb - Navigation breadcrumbs
• Navigation Menu - Complex navigation menus
• Pagination - Page navigation controls
• Tabs - Tabbed content organization
• Menu Bar - Application menu bars
• Context Menu - Right-click context menus
• Dropdown Menu - Dropdown navigation

Provide clear feedback to users:

• Alert - Important messages and notifications
• Alert Dialog - Modal confirmation dialogs
• Dialog - Modal dialogs and overlays
• Toast - Temporary notifications
• Progress - Progress indicators
• Skeleton - Loading placeholders
• Tooltip - Helpful hover information
• Popover - Contextual information panels
• Hover Card - Rich hover content

Present data effectively:

• Table - Data tables with sorting and filtering
• List - Ordered and unordered lists
• Avatar - User profile images
• Badge - Status indicators and labels
• Calendar - Date and event calendars
• Carousel - Image and content carousels
• Typography - Text styling components

Essential building blocks:

• Code - Syntax-highlighted code blocks
• Copy Button - One-click copy functionality
• Component Card - Component showcase cards
• Collapsible - Expandable content sections
• Command - Command palette interface
• Form - Form wrapper with validation
• Label - Form labels
• Toggle - Toggle buttons and groups

All components are built with mobile-first responsive design:

• Breakpoints: sm (640px), md (768px), lg (1024px), xl (1280px), 2xl (1536px)
• Flexible Layouts: Components adapt to different screen sizes
• Touch-Friendly: Optimized for touch interactions on mobile devices

Customize components to match your brand:

import { Button } from '@dashflowx/core';

// Custom styling
<Button className="bg-purple-500 hover:bg-purple-600">
  Custom Button
</Button>

// With variants
<Button variant="outline" size="lg">
  Large Outline Button
</Button>

1. Install the package: npm install @dashflowx/core
2. Import components: import { Button } from '@dashflowx/core'
3. Start building: Use components in your React application
4. Customize: Apply your own styles and themes
5. Deploy: Build and deploy your application

We welcome contributions! Please see our Contributing Guide for details on how to get involved.

This project is licensed under the MIT License - see the LICENSE file for details.

Ready to get started? Check out our Button component to begin building amazing user interfaces!