Dyvix UI

Appearance

Introduction ​

What is Dyvix UI? ​

Dyvix is an open source, config-driven, animated component library. Beautiful by default, customizable by design. Built for developers who value production-ready components without fighting their design system. Headless when you need it, fully-themed when you don't.

Dyvix UI is built around the following foundations:

  • Headless by default: Components ship with sensible fallbacks. Bring your own colors or styles and they just work or opt into a theme instantly.
  • Global Theme System: Thirteen pre-built themes shared across every component. Switch your UI visual identity with ever-growing theme library.
  • Global Animation system: Twelve animation presets powered by GSAP. We believe in a non-static architecture, while keeping the option to remove any feature you don't like.
  • Scalable JSON Architecture: Built internally on JSON schemas, allowing highly dynamic components to deliver immense functionality with a fraction of the bundle size. And some components include json modes when it makes sense.
  • Logic-First Architecture: Dyvix handles your data validation and data flow.
  • Performance & Security: We believe in a security and performance-first doctrine over content and functionality.

Why Dyvix? ​

Compared to other UI libraries, Dyvix emphasizes:

  • Animation presets: Pre-built animations for common UI patterns.
  • Modal presets: Built-in modal workflows for common use cases like authentication and forms.
  • Modal field validation: Built-in config driven modal input validation(mandatory, value matching, etc.) to reduce boilerplate with the ability to add custom regex validation easily.
  • JSON-driven theming: Swap entire themes without code changes.
  • Smart JSON Caching (SJC): A multi-layer caching system (L1, L2, L3) designed for high-performance JSON & CSS delivery and near-zero latency.
  • Table with sorting: Multi-column sortable table thanks to config-driven mode.
  • 36.3 kB packed: Lightweight architecture, zero bloat.

Accessibility ​

Dyvix UI components include ARIA labels and support keyboard navigation. We strive for WCAG 2.1 AA compliance to ensure your applications are usable by everyone.

Browser Support ​

Requires a browser with IndexedDB support. Tested primarily on chromium-based browsers.

Next Steps ​

Ready to dive in? See the Quick Start guide or learn about Themes.