Oryx: Building components

Oryx provides a fully component-based architecture where only components are used to render the application. Components are the building blocks used to create modular and reusable elements. The components are primarily concerned with UI/UX, leaving business logic and integrations to other application layers.

Oryx contains a library of standard components organized and distributed in packages. There are different types of components, including a design system. The components are built with powerful UI/UX features:

• Responsive design
• Themes support using design tokens
• Typography
• Icon system
• Internationalization (i18n) features:
  • Locales
  • Number and price formatting
  • Directionality: left-to-right versus right-to-left
• Accessibility features:
  • Dark and light mode
  • Color contrast
  • Keyboarding
  • Screen reader support

The components are rendered inside compositions and pages. The pages, organization, and layout of the components are provided in standard feature sets. When you install an Oryx application, the feature sets are available in the presets package.

You can customize the components with a custom theme, style rules, component options, or component logic. You can also implement custom components and add them to the application.

The components are built as web components, which makes them highly reusable in other web frameworks and systems. For more details, see Integration of components.

Oryx provides a reactive framework and is designed to work efficiently in a single page application architecture. To ensure reactivity throughout the application, Oryx rerenders only fragments of the components that are affected by the changing application state. For more details, see key concepts of reactivity.