Introduction

What is Fidely UI?

Fidely UI is a modern React design system powered by Ark UI and Panda CSS. It provides accessible, themeable, and composable components for building high-quality web applications.

Rather than focusing only on components, Fidely UI is built around a design system first approach, combining design tokens, styling recipes, and headless primitives into a cohesive and scalable workflow.

The primary goal of Fidely UI is to help teams build consistent, accessible interfaces without sacrificing flexibility or performance.

How Fidely UI is structured

Fidely UI is organized into two layers:

• Panda Preset
  Design tokens, recipes, and utilities powered by Panda CSS.
  Can be used independently or as the foundation for components.

• React Components
  Accessible, headless first components built on Ark UI and styled using the preset.

This separation lets you:

• Use only the preset with your own components, or
• Use the full Fidely UI React component library.

How Fidely UI is different from other UI libraries?

Many UI libraries are built on top of Emotion or Tailwind CSS.

Fidely UI is built on Panda CSS, a zero-runtime CSS-in-JS system that generates static, type-safe styles at build time.

This means:

No runtime styling cost

Faster rendering and smaller bundles

Strongly typed design tokens and recipes

Predictable and scalable theming

Combined with Ark UI’s headless, accessible primitives, Fidely UI delivers both performance and accessibility out of the box.

Note: this isn't about which library is better, every library has its own pros and cons.

Core technologies

Fidely UI is built on:

• React: Component-based UI development
• Ark UI: Accessible, headless primitives
• Panda CSS: Zero-runtime styling, tokens, and recipes

Contributing

PRs on Fidely UI are always welcome, please see our contribution guidelines to learn how you can contribute to this project.

Acknowledgements

Fidely UI’s documentation and design philosophy are inspired by Ark UI, Chakra UI.
We’re grateful for their contributions to the open-source ecosystem.