@fliidotdev/builder-ui

Modern, accessible React component library powering the Flii visual development platform. Built with Radix UI primitives and designed for seamless integration with visual builders.

Installation

npm install @fliidotdev/builder-ui
# or
yarn add @fliidotdev/builder-ui
# or
pnpm add @fliidotdev/builder-ui

Features

• Accessibility First: Built on Radix UI for WCAG 2.1 AAA compliance
• Visual Builder Ready: Components designed for drag-and-drop interfaces
• Fully Typed: Complete TypeScript definitions for all components
• Tree-Shakeable: Import only what you need
• Theme Customizable: CSS variables and theme tokens for full control
• Dark Mode: Built-in support for light and dark themes
• Production Ready: Battle-tested in the Flii platform

Quick Start

import { Button, Card, Dialog } from '@fliidotdev/builder-ui';

function App() {
  return (
    <Card>
      <Card.Header>
        <Card.Title>Welcome to Flii UI</Card.Title>
      </Card.Header>
      <Card.Content>
        <p>Build beautiful interfaces with our component library</p>
        <Button variant="primary" size="medium">
          Get Started
        </Button>
      </Card.Content>
    </Card>
  );
}

Components

Layout Components

• Container - Responsive container with max-width constraints
• Grid - CSS Grid wrapper with visual builder support
• Flex - Flexbox container with gap and alignment props
• Stack - Vertical or horizontal stacking with spacing

Form Components

• Button - Multiple variants, sizes, and states
• Input - Text, number, email, password inputs
• Select - Native and custom select dropdowns
• Checkbox - Single and group checkboxes
• Radio - Radio button groups
• Switch - Toggle switches
• Slider - Range sliders with marks
• Form - Form wrapper with validation

Feedback Components

• Alert - Info, success, warning, error states
• Toast - Non-blocking notifications
• Progress - Linear and circular progress indicators
• Spinner - Loading spinners
• Skeleton - Content loading placeholders

Overlay Components

• Dialog - Modal dialogs with backdrop
• Drawer - Side panels
• Popover - Contextual popovers
• Tooltip - Hover tooltips
• ContextMenu - Right-click menus
• DropdownMenu - Dropdown action menus

Data Display

• Table - Data tables with sorting and filtering
• Card - Content cards with header/footer
• Badge - Status badges and tags
• Avatar - User avatars with fallbacks
• Accordion - Collapsible content panels
• Tabs - Tab navigation

Theming

Using CSS Variables

:root {
  --flii-primary: #667eea;
  --flii-primary-hover: #5a67d8;
  --flii-secondary: #48bb78;
  --flii-text: #2d3748;
  --flii-background: #ffffff;
  --flii-border: #e2e8f0;
  --flii-radius: 8px;
  --flii-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

Theme Provider

import { ThemeProvider } from '@fliidotdev/builder-ui';

const theme = {
  colors: {
    primary: '#667eea',
    secondary: '#48bb78'
  },
  fonts: {
    body: 'Inter, sans-serif',
    heading: 'Inter, sans-serif'
  },
  radii: {
    small: '4px',
    medium: '8px',
    large: '16px'
  }
};

function App() {
  return (
    <ThemeProvider theme={theme}>
      {/* Your app */}
    </ThemeProvider>
  );
}

Accessibility

All components follow WAI-ARIA guidelines:

• Keyboard navigation support
• Screen reader announcements
• Focus management
• ARIA attributes
• Semantic HTML

Example with Accessibility

<Dialog>
  <Dialog.Trigger asChild>
    <Button aria-label="Open settings">Settings</Button>
  </Dialog.Trigger>
  <Dialog.Content>
    <Dialog.Title>Settings</Dialog.Title>
    <Dialog.Description>
      Manage your account settings and preferences
    </Dialog.Description>
    {/* Content */}
  </Dialog.Content>
</Dialog>

Visual Builder Integration

Components are optimized for visual builders:

// Component manifest for visual builders
export const ButtonManifest = {
  name: 'Button',
  props: {
    variant: {
      type: 'select',
      options: ['primary', 'secondary', 'outline', 'ghost'],
      default: 'primary'
    },
    size: {
      type: 'select',
      options: ['small', 'medium', 'large'],
      default: 'medium'
    },
    disabled: {
      type: 'boolean',
      default: false
    },
    children: {
      type: 'text',
      default: 'Click me'
    }
  }
};

Custom Hooks

Useful hooks for building interfaces:

• useTheme - Access theme values
• useMediaQuery - Responsive design
• useClickOutside - Detect outside clicks
• useFocusTrap - Trap focus in modals
• useId - Generate unique IDs

Performance

• Lazy loading support
• Minimal bundle size
• Tree-shaking optimized
• No runtime CSS-in-JS
• Memoized complex computations

Browser Support

• Chrome/Edge (latest)
• Firefox (latest)
• Safari 14+
• iOS Safari 14+
• Chrome Android (latest)

Development

# Install dependencies
pnpm install

# Start Storybook
pnpm storybook

# Build library
pnpm build

# Run tests
pnpm test

# Type checking
pnpm type-check

Migration Guide

From v0.x to v1.0

// Before (v0.x)
import Button from '@fliidotdev/builder-ui/button';

// After (v1.0)
import { Button } from '@fliidotdev/builder-ui';

License

MIT © fliidotdev

Contributing

We welcome contributions! Please see our Contributing Guide.

Support

• Documentation
• Storybook
• GitHub Issues
• Discord Community