---
title: Introduction
description: Build custom Flutter interfaces with Remix behavior and Mix styling
---

Remix is a Flutter component library built on [Mix](https://github.com/conceptadev/mix),
which defines styling, and [Naked UI](https://github.com/conceptadev/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](/getting-started) |
| Install editable recipes | Local theme and component source, plus your application | [Open Code reference](/open-code) |
| Learn through a complete screen | A settings form, save behavior, dialog, and sidebar | [CLI settings-screen tutorial](/tutorials/settings-screen) |

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

## Styling components

A styler defines appearance; the widget supplies behavior. Start with the
[styling guide](/guides/styling-components) for states, animation, and reuse.
The [Styler API](/styler-api) documents the canonical methods and shorthand
rules. Individual [component pages](/components/button) cover their own slots
and interaction contracts.

## Theming with Fortal

The [Fortal preset](/fortal) 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](/tutorials/settings-screen#try-fortal-separately)
to compare it with the default 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](/fortal) | 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:

```dart
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](/tutorials/settings-screen) shows a
complete host, including the scope placement used by its dialog.

## Examples

- [Fortal dashboard](https://conceptadev.github.io/remix/dashboard/): an application with layouts, data, and theme controls.
- [Component catalog](https://conceptadev.github.io/remix/catalog/): components, variants, and interaction states.
- [Download both tutorial projects](/assets/remix-cli-tutorial/sample-projects.zip): 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.