Introduction

Remix is a Flutter component library built on Mix, which defines styling, and Naked UI, which supplies unstyled interaction primitives. Remix provides interaction behavior, focus handling, and accessibility semantics while leaving the visual design to your application.

Why Remix?

Custom controls need more than a different color. Buttons need loading and disabled behavior; menus need focus and keyboard handling; dialogs need to work with the application's navigator. Remix supplies those component behaviors so you can concentrate on the interface and its application state.

Use a component styler to define appearance, reuse it across instances, and change styles in response to hover, focus, or press. Your application still owns layout, values, callbacks, and persistence.

Quick Start

Choose the workflow that matches what you want to own:

Workflow	What you write	Start here
Use Remix directly	Component instances and Mix stylers	Install and render a button
Install editable recipes	Local theme and component source, plus your application	Open Code reference
Learn through a complete screen	A settings form, save behavior, dialog, and sidebar	CLI settings-screen tutorial

The CLI tutorial uses a pinned checkout, not an assumed published CLI release. It covers the small vanilla preset and the separate fortal preset.

Styling components

A styler defines appearance; the widget supplies behavior. Start with the styling guide for states, animation, and reuse. The Styler API documents the canonical methods and shorthand rules. Individual component pages cover their own slots and interaction contracts.

Theming with Fortal

The Fortal preset provides a Radix Themes-inspired starting point. The CLI installs its tokens, scope, and recipes into your application. You own those files; the preset does not add a remix_fortal dependency to your app.

Use the tutorial's Fortal step to compare it with the Vanilla preset. Keep the two presets in separate initialized projects: their token systems and component constructors differ.

Host capabilities

Remix composes inside your Flutter host. It does not require a MaterialApp, Scaffold, or Remix-owned application wrapper.

UI	Caller provides
Ordinary `Remix*` widgets	The inherited Flutter services used by the widget subtree
Widgets styled by the Fortal preset	The preset's token scope, plus the widget's normal Flutter services
Menu, select, popover, and tooltip	An `Overlay`; use `Overlay.wrap` when no `Navigator` is needed
`showRemixDialog` and `showRemixAlertDialog`	A caller-owned `Navigator` above the invoking context

For a portal-based interface without routing, provide an overlay:

import 'package:flutter/widgets.dart';
import 'package:remix/remix.dart';

Widget buildPortalHost() {
  return WidgetsApp(
    color: const Color(0xFFFFFFFF),
    builder: (_, _) => Overlay.wrap(
      child: Center(
        child: RemixMenu<String>(
          trigger: const RemixMenuTrigger(label: 'Actions'),
          items: const [
            RemixMenuItem(value: 'share', label: 'Share'),
          ],
        ),
      ),
    ),
  );
}

Material, Cupertino, Widgets, and router-based hosts can all supply these services. The settings-screen tutorial shows a complete host, including the scope placement used by its dialog.

Examples

Fortal dashboard: an application with layouts, data, and theme controls.
Component catalog: components, variants, and interaction states.
Download both tutorial projects: default and Fortal examples with source and behavior tests.

The repository also contains apps/dashboard, apps/demo, packages/remix/example, and registry_source/example. The last is an authoring-package example, not a dependency the CLI adds to consumer apps.