Component library for the Synetics framework
About • Installation • Quick Start • Components • Roadmap • Contributing
@synetics/ui is the official component library for the Synetics framework. It provides production-ready, accessible UI components built with fine-grained reactivity, TailwindCSS styling, and a fluent builder API for configuration.
- 🎨 Design Tokens: Uses @synetics/design-tokens for consistent styling
- 📏 Size System: Standardized sizing (xs, sm, md, lg, xl) across all components
- 🎭 Variant System: Multiple style variants (solid, outline, ghost, soft)
- 🏗️ Builder Pattern: Fluent API for component configuration
- 🎯 Type-Safe: Full TypeScript support with strict typing
- ♿ Accessible: ARIA attributes and keyboard navigation built-in
- 🚀 Synetics-Native: Built specifically for Synetics's reactivity system
- 💅 TailwindCSS: Utility-first styling with custom configuration
- 📦 Modular: Clean architecture with one item per file
Explore 80+ Advanced Examples:GitHub Pages Showcase(Coming Soon)
The showcase demonstrates production-grade patterns from the Synetics ecosystem:
// Modal with content projection - logic stays local, UI projects globally<Modalid="demo"isOpen={isOpen}onClose={closeModal}/><Portalid="demo"target="body"><inputvalue={localData()}onInput={updateLocalData}/>{/* Component scope preserved, UI rendered in portal */}</Portal>Benefits:
- UI projected to global DOM (modal, tooltip, dropdown)
- State and logic remain in component scope
- Clean separation of concerns
- No prop drilling
// Graceful error handling with isolated boundaries<Tryer><ComponentThatMightFail/><Catcher>{(error)=><ErrorDisplayerror={error}/>}</Catcher></Tryer>Features:
- Independent error boundaries
- Prevents app-wide crashes
- Fallback UI for failed sections
- Error propagation control
// Fine-grained updates with automatic dependency trackingconst[count,setCount]=createSignal(0);constdouble=createMemo(()=>count()*2);// Only subscribed DOM nodes update - no virtual DOM diffing<div>{count()}</div>{/*Updateswhencountchanges*/}<div>{double()}</div>{/*Updateswhencountchanges*/}// Stale-while-revalidate with automatic cache managementconstuser=createResource(()=>fetchUser(id),{staleTime: 5000// Fresh for 5 seconds});// Instant cache hits, background revalidation<Showwhen={user.data}>{(u)=><Profileuser={u}/>}</Show>// ServiceManager with lifecycle managementconstservices=newServiceManager();services.register('analytics',()=>newAnalytics(),{lifetime: 'singleton',// Single instance app-wide});// Use in componentsconstanalytics=inject('analytics');analytics.track('event');// Declarative control flow with proper keying<Showwhen={isLoggedIn()}><Dashboard/></Show><Foreach={items()}>{(item)=><Item{...item}/>}</For><Indexeach={colors()}>{(color,i)=><Colorvalue={color()}/>}</Index>📁 src/showcase/
├── reactivity/ # Signal, memo, effect demos
├── portal/ # Modal, tooltip portals
├── error-boundary/ # Tryer/Catcher patterns
├── resource/ # Data fetching, caching
├── di/ # Dependency injection
├── control-flow/ # Show, For, Index
└── components/ # Component composition
🔗 View Source:packages/synetics-ui.dev/src/showcase
pnpm showcase:dev # Development server
pnpm showcase:build # Build for productionpnpm add @synetics/uiThe component library requires:
pulsar- The Synetics framework@synetics/design-tokens- Design system tokenstailwindcss- Utility-first CSS framework
All components use a fluent builder pattern for configuration:
import{ComponentConfig,Button}from'@synetics/ui';// Create a configurationconstconfig=newComponentConfig('primary')// Start with color.variant('solid')// Set variant.size('lg')// Set size.rounded('md')// Border radius.shadow('lg')// Shadow.fullWidth()// Full width.build();// Build final config// Use configuration with componentconstmyButton=Button({
config,label: 'Click Me',onclick: ()=>console.log('Clicked!'),});import{PrimaryButton,Input,Badge}from'@synetics/ui';// Use factory variants for quick setupconstsaveButton=PrimaryButton({label: 'Save Changes',onclick: ()=>saveFn(),});constemailInput=Input({type: 'email',placeholder: 'your@email.com',required: true,});conststatusBadge=Badge({label: 'Active',color: 'success',});- Button - Interactive button with variants, sizes, icons, loading states
- Input - Text input with prefix/suffix, error states, validation
- Checkbox - Accessible checkbox with indeterminate state
- Radio - Radio button for single selections
- Toggle - Switch/toggle component for boolean states
- Textarea - Multi-line text input
- Spinner - Loading spinner with size variants
- Skeleton - Skeleton loader for content placeholders
- Typography - Heading, paragraph, and text components
- Badge - Status and label badges with colors and variants
- Button Group - Grouped buttons with shared configuration
- Label - Form labels with required indicators
- Radio Group - Radio button groups with shared state
- Card - Container with header, body, footer sections
newComponentConfig(color)// 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'neutral'.variant(value)// 'solid' | 'outline' | 'ghost' | 'soft'.size(value)// 'xs' | 'sm' | 'md' | 'lg' | 'xl'.rounded(value)// 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'.shadow(value)// 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'.border(boolean)// Enable/disable border.disabled(boolean)// Disabled state.loading(boolean)// Loading state.fullWidth(boolean)// Full width.transition(boolean)// Enable transitions.transitionDuration(value)// 'fast' | 'normal' | 'slow'.hover(boolean)// Enable hover effects.focus(boolean)// Enable focus effects.active(boolean)// Enable active effects.className(string)// Additional CSS classes.build();// Returns IComponentConfig- ✅ Atoms: Button, Input, Checkbox, Radio, Toggle, Textarea, Spinner, Skeleton, Typography
- ✅ Molecules: Badge, Button Group, Label, Radio Group
- ✅ Organisms: Card
- ✅ Builder pattern API
- ✅ Design token integration
- ✅ TypeScript strict mode
- ✅ TailwindCSS integration
- 🔄 Select - Dropdown select with search and multi-select
- 🔄 Modal - Dialog and modal components
- 🔄 Dropdown - Menu dropdown with keyboard navigation
- 🔄 Tabs - Tab navigation component
- 🔄 Accordion - Collapsible content panels
- 🔄 Toast - Toast notifications system
- 🔄 Tooltip - Contextual tooltips
- 🔄 Popover - Popover content containers
- 📋 Table - Data table with sorting, filtering, pagination
- 📊 Chart - Basic chart components (bar, line, pie)
- 📅 Date Picker - Calendar date selection
- 🎨 Color Picker - Color selection component
- 📁 File Upload - Drag-and-drop file upload
- 🔍 Search - Search input with suggestions
- 🏷️ Tag Input - Multi-tag input component
- 📝 Rich Text Editor - WYSIWYG editor
- 🎨 Theming System - Custom theme creation and switching
- 📱 Responsive Utilities - Mobile-first responsive components
- 🌙 Dark Mode - Complete dark mode support
- ♿ A11y Audit - Full accessibility compliance
- 📖 Storybook - Interactive component documentation
- 🧪 Test Coverage 90%+ - Comprehensive test suite
- 📦 Tree Shaking - Optimized bundle sizes
- 🎭 Animation Library - Pre-built animation presets
Part of the Synetics framework ecosystem:
| Package | Description | Repository |
|---|---|---|
| synetics.dev | Main reactive framework | GitHub |
| @synetics/ui | Component library (this package) | GitHub |
| @synetics/design-tokens | Design tokens & brand assets | GitHub |
| @synetics/transformer | JSX transformer | GitHub |
| @synetics/vite-plugin | Vite integration | GitHub |
| synetics-demo | Example applications | GitHub |
Contributions welcome! We need help with:
- 🎨 New Components - Build additional UI components
- ♿ Accessibility - Improve ARIA support and keyboard navigation
- 📖 Documentation - Add examples and usage guides
- 🧪 Tests - Increase test coverage
- 🐛 Bug Fixes - Report and fix issues
- 💡 Feature Requests - Suggest new components or improvements
# Clone the repository
git clone https://github.com/binaryjack/synetics-ui.dev.git
cd synetics-ui.dev
# Install dependencies
pnpm install
# Build
pnpm build
# Watch mode
pnpm dev- ✅ One item per file (interfaces, types, implementations)
- ✅ TypeScript strict mode (no
anytypes) - ✅ Prototype-based classes for components
- ✅ Use
Synetics.HtmlExtends<T>for HTML props - ✅ Builder pattern for component configuration
- ✅ Comprehensive JSDoc comments
MIT License - Copyright (c) 2026 Synetics framework
See LICENSE for full details.
Built with ⚡ by Tadeo Piana and contributors.
Design inspiration from:
- Radix UI - Accessible component primitives
- shadcn/ui - Beautiful component design
- Headless UI - Unstyled accessible components
@synetics/ui - v0.1.0
Component library for the Synetics framework