---
title: Fortal
description: A Radix Themes-inspired preset theme and widget catalog for Remix
---

Remix gives you complete freedom to build any design system, which also means it
ships no theme of its own. **Fortal** is the ready-made alternative: a
comprehensive set of prebuilt styles based on
[Radix Themes 3.3.0](https://www.radix-ui.com/themes), providing a polished,
modern UI out of the box while remaining fully customizable.

## Why a separate package

Fortal lives in its own package, `remix_fortal`, so that `remix` stays a
genuinely theme-free component library. If you are building your own design
system on Remix, you pay nothing for a theme you never use — no token tables, no
Radix color data, no parity contract. If you want Fortal, you add one dependency
and get the whole catalog.

`remix_fortal` depends on `remix` and does not re-export it. Import both when you
need base Remix widgets alongside Fortal ones.

## Installation

```bash
flutter pub add remix_fortal
```

## Quick Start

Wrap your app with `FortalScope` to provide the design tokens, then use the
`Fortal*` widgets. Named constructors select a fixed variant; use the unnamed
constructor with `variant:` when the choice is dynamic:

```dart
import 'package:flutter/material.dart';
import 'package:remix_fortal/remix_fortal.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FortalScope(
      child: WidgetsApp(
        color: Colors.white,
        builder: (_, _) => Center(
          child: FortalButton.solid(
            onPressed: () {},
            label: 'Fortal Button',
          ),
        ),
      ),
    );
  }
}
```

`FortalScope` is a `MixScope`, so it satisfies the theme-scope row of Remix's
[host capabilities](/#host-capabilities) table. Place it above your app widget so
that overlay and route content inherits the tokens.

## Customizing Fortal Styles

Fortal widgets call the matching `fortal*Style` recipe internally. Use those
recipes directly when you need a custom Remix widget composition:

```dart
import 'package:flutter/material.dart';
import 'package:remix/remix.dart';
import 'package:remix_fortal/remix_fortal.dart';

final style = fortalButtonStyle(variant: FortalButtonVariant.solid)
  .borderRadiusAll(const Radius.circular(8))
  .paddingX(32)
  .onHovered(.scale(1.05));
```

## Fortal Design Tokens

Fortal styles are built on a robust token system that includes:

- **Colors**: 12-step accent and gray scales (powered by Radix Colors)
- **Spacing**: 9-step spacing scale
- **Border Radius**: 6-step radius scale
- **Shadows**: 6-level shadow system
- **Typography**: 9-size type scale
- **Border Widths**: Consistent stroke weights

You can use these tokens directly in your custom styles:

```dart
import 'package:remix/remix.dart';
import 'package:remix_fortal/remix_fortal.dart';

final style = ButtonStyler()
  .color(FortalTokens.accent9())
  .paddingAll(FortalTokens.space4())
  .borderRadiusAll(FortalTokens.radius3())
  .label(TextStyler().color(FortalTokens.accentContrast()));
```

## Covered components

Every Remix component has a matching Fortal recipe and generated widget. See the
`## Fortal widgets` section on each [component page](/components/button) for its
variants, sizes, and recipe source.