Introduction

Vibrant UI is a modern React component library for Nettbureau's apps and websites.

Philosophy

At Nettbureau we value user experience and consistency. Vibrant UI provides shared patterns and visuals that create a seamless experience across products. By offering ready-made components, it streamlines development so designers and developers can focus on unique features instead of repetitive tasks. This helps teams work faster, stay productive, and focus on what matters most.

Features

The Vibrant UI library is built with several key features in mind, including:

  • Consistency - Designed to match the design system and have a consistent look.
  • Accessibility - Built to follow accessibility guidelines.
  • Customizability - The components are consistent by design but flexible enough to be customized.
  • Composability - Built from small pieces you can mix and match, but still easy to use out of the box.
  • Modularity - Use only the components you need, no heavy dependencies.
  • Performance - Optimized for speed and performance.
  • Context-Awareness - Automatically adapts to surroundings, minimizing the need for manual adjustments.
  • Artfully crafted - It's gracefully composed to be visually stunning, enhancing the overall look and feel.

Technology

The Vibrant UI library is built using the following technologies:

  • TypeScript - A typed superset of JavaScript that compiles to JavaScript.
  • React - A library for building user interfaces.
  • Vanilla Extract - A library for writing compile-based CSS-in-JS.
  • React Aria - A library for building accessible UI components.
  • Motion Framer - A library for building animations in React.

Additionally, we use fonts and icons from the following sources:

  • Geist - A typeface specifically designed for developers and designers.
  • Font Awesome - A collection of icons.