About Fusion

Welcome to Fusion! This project is designed to streamline your development workflow by providing a comprehensive design system, a versatile React component library, and deep integration with Sanity for powerful content management.

Core Goals

Fusion aims to achieve several key objectives for various stakeholders:

Developer Efficiency: Provide well-documented, type-safe, reusable components and tools that speed up development and reduce boilerplate.
Designer Customizability: Offer a flexible theming system and component overrides to adapt Fusion to your specific brand and project needs.
Editor Connectivity: Empower content creators with flexible and powerful tools to build engaging digital experiences through a seamless Sanity integration.
User Accessibility: Ensure the best experience for end users by providing best practices for accessibility out of the box.

The Fusion Ecosystem

Fusion is composed of several packages, each serving a distinct purpose. Together, these packages provide a cohesive and powerful toolkit for building beautiful, consistent, and content-rich applications.

Fusion UI

The @codedazur/fusion-ui package is the heart of the visual and interactive aspects of Fusion. It’s a React component library packed with a wide range of UI elements, from basic buttons and inputs to complex layout structures. fusion-ui is built with a robust theming system based on design tokens, allowing for extensive customization.

Key Features

Comprehensive set of React components.
Multi-tiered design token system (primitive, semantic, component).
Flexible theming using Vanilla Extract, enabling custom themes and styles.
Component-level overrides via a dedicated ComponentProvider.

Fusion CLI

The @codedazur/fusion-cli package is a command-line interface for Fusion. It provides a set of tools for working with Fusion, including commands for generating new themes, components, pages, sections, adapters, and schemas.

Fusion Sanity Integration

The @codedazur/fusion-sanity package acts as the bridge between your Sanity content and your fusion-ui frontend. It provides tools and components to intelligently render Sanity data structures using the components from fusion-ui.

Key Features

SanityParser component for rendering arbitrary Sanity data based on _type.
A system of Adapters to transform Sanity data into props for fusion-ui components.
Pre-configured PortableText component for rich text rendering using fusion-ui elements.
Default adapters for common content types provided by @codedazur/sanity-plugin-fusion.

Fusion Sanity Plugin

To make content modeling in Sanity a breeze and ensure it aligns perfectly with what fusion-sanity expects, the @codedazur/sanity-plugin-fusion package provides a Sanity Studio plugin. It includes a collection of pre-built schemas and TypeScript types for common UI patterns and page sections.

Key Features

A Sanity Studio plugin that registers a suite of useful schemas (e.g., for buttons, images, hero sections, card grids).
TypeScript types for your Sanity data, ensuring type safety across your stack.
Configurable plugin options to tailor the schemas and types to your project’s needs (e.g., defining linkable document types, custom themes for Studio previews).