UI Kit

Think of particles as your design tokens, those nifty little helpers for your UI! While design tokens can be implemented in various ways (like css-in-js, CSS variables, or Sass modules), we've chosen to roll with Tailwind components for their flexibility and ease of use. Since particles are essentially Tailwind styles, they're represented as strings. But hey, strings can get messy, right? That's where the @vyn/cn package comes to the rescue, helping us keep things organized and manageable! Particles are primarily used by atoms, but feel free to sprinkle them as classes on any element you fancy.

This module manages the base of the hierarchy of the components of this library. The definition of an Atom is a component made up of an HTMLElement, because of this, they must be declared using the type iAtom that links them to the properties of an HTMLElement. Atoms use {@linkcode /@lunchbox/ui/doc/particles | "Particles"} to style themselves. Particles are smaller and more abstract things that don't represent HTML elements.

This module exports various Molecule components, which are essential building blocks in our UI library. Molecules are multi-element components composed of Atoms and, in some cases, Particles. They serve as a standard unit of interface, striking a balance between simplicity and complexity.

• Non-Reactive: Molecules do not require client-side JavaScript to function, ensuring they are lightweight and efficient.
• Simplicity: Designed to be straightforward, Molecules should not have excessive configuration options, making them easy to use and integrate.