HeadlessGraphUI

Completely unstyled, fully accessible UI components for building graph-based interfaces in React. Inspired by Headless UI, these components provide the behavior and accessibility features while letting you control the styling completely.

🎯 Philosophy

HeadlessGraphUI follows the "headless" approach - providing robust functionality and accessibility without imposing any styling decisions. Perfect for building graph visualization tools, network diagrams, property panels, and data exploration interfaces.

🚀 Getting Started

npm install headlessgraphui
# or
yarn add headlessgraphui

import { Property } from 'headlessgraphui';

function GraphNodeDetails({ node }) {
  return (
    <div className="node-properties">
      <Property 
        data={node} 
        propertyKey="name" 
        className="property-item"
      >
        {(key, value) => <><strong>{key}:</strong> {value}</>}
      </Property>
      <Property 
        data={node} 
        propertyKey="type" 
        className="property-item"
      >
        {(key, value) => `${key}: ${value}`}
      </Property>
    </div>
  );
}

📦 Components

Currently Available

• Property - Display key-value pairs from graph data

Planned Components

• Properties - Collection of Property components
• Filter - Single filter component for graph data
• FilterGroup - Grouped filter components
• Filters - Collection of all filters
• PatternInput - Input for graph pattern matching
• SearchInput - Search functionality for graph elements
• LimitInput - Controls for limiting result sets

🔧 Component Features

Property Component

The Property component is a completely headless component that extracts values from your graph data and provides them to a render function. You have full control over how the property is displayed.

Props

• data: T - The data object containing the property
• propertyKey: string - The key name to extract and display
• children: ReactNode | ((key: string, value: any) => ReactNode) - Required: Either static content or a render function
• extract?: (data: T, key: string) => any - Custom extraction function (defaults to simple object property access)
• All standard HTML div props

🎨 Styling

HeadlessGraphUI components are completely unstyled. You can style them using:

• Tailwind CSS - Pass classes via className props
• CSS Modules - Import and apply your styles
• Styled Components - Wrap components with styled()
• Regular CSS - Use class names and selectors
• Any CSS-in-JS solution

♿ Accessibility

All components follow WAI-ARIA guidelines and include:

• Proper semantic HTML structure
• Keyboard navigation support
• Screen reader compatibility
• Focus management
• High contrast support

🛠 Development

# Install dependencies
npm install

# Build the library
npm run build

# Type checking
npm run type-check

# Linting
npm run lint

🤝 Contributing

This library is in early development. Contributions, feedback, and suggestions are welcome!

📄 License

MIT License - see LICENSE file for details.