Theming and widgets for Flutter. Works with Material, Cupertino, or on its own.

Live Demo • See in Production • Pub.dev

Orient UI gives you two things:

1. Style is a simple, Material-independent theming system. Colors, typography, radii, durations, breakpoints. All in one file you own. No ThemeExtension, no boilerplate.
2. Widgets are neutral widgets (buttons, toggles, popovers, navigation, and more) that work on mobile, web, and desktop.

Use both, or just the theming. Your call.

• Nothing to replace. Keep your MaterialApp, your Scaffold, your existing widgets. Orient UI sits alongside them.
• You own the code. Every file lives in your project. Change anything you want. No package lock-in.
• Cross-platform. Responsive layouts, hover states, keyboard navigation. Mobile, web, and desktop.
• Zero dependencies. Nothing added to your pubspec.
• AI-native. init sets up rules for Claude Code, Cursor, Windsurf, and Codex. Your AI uses Orient UI by default.

dart pub global activate orient_ui

orient_ui init

This creates lib/style.dart with light/dark colors, typography, radii, durations, and breakpoints. You own this file. Move it, rename it, extend it. Also sets up AI rules so your coding agent understands Orient UI out of the box.

Use it anywhere:

final ColorTokens colors = context.style.colors;
final TextStyle heading = context.typography.heading;

That's it. If all you need is theming, you're done.

orient_ui add button

This creates lib/button.dart. Update the style import to match where you placed style.dart:

import 'package:your_app/style.dart'; // adjust to your path

Button(
  label: 'Click me',
  onPressed: () {},
)

Widgets follow system brightness by default. To control it manually:

Style(
  brightness: Brightness.dark,
  child: MaterialApp(
    home: MyHomePage(),
  ),
)

Open style.dart and make it yours. Add color tokens, change typography scales, adjust breakpoints.

final ColorTokens _colorsLight = ColorTokens(
  background: Color(0xFFFFFFFF),
  foreground: Color(0xFF2A2A2A),
  accent: Color(0xFF18181B),
  // ... change these to match your brand
);

• Button (6 variants)
• Spinner
• NavBar (Navigation Rail + Bottom Bar)
• Toast
• EmptyState
• CopyButton
• Popup
• AlertPopup
• ConfirmationPopup
• SearchField
• CardBox
• Tile
• Toggle
• ToggleTile
• SingleChoice
• SingleChoiceTile
• MultiChoice
• MultiChoiceTile
• Typography
• Picker
• InfoBanner
• PopoverMenu
• TappableIcon
• SegmentBar
• Tag
• Tabs

• TextField
• VerticalTile
• AdaptivePageTransition
• DashedBorder

Try them at the interactive demo.

All widgets are tested.

MIT

Built by UserOrient