Orient UI

Design system for Flutter without Material or Cupertino! 😍

Live Demo • See in Production • Github • Pub.dev

Orient UI Components

Features

  • 🌍 Cross-platform. Works on iOS, Android, Web, macOS, Windows, and Linux.
  • 🎨 No Material or Cupertino. Neutral design system with total freedom to customize.
  • 📦 You own the code. Generated files are yours to modify however you want.
  • 🔓 No lock-in. No dependency on a package, just plain Dart files in your project.

💡 Why Orient UI?

UserOrient is a feedback SDK for Flutter apps.

Its web dashboard and mobile app is built with this design system.

Now it's yours to build web and desktop apps with Flutter easier (and also mobile apps).

Want to say thanks? Use UserOrient SDK in your Flutter apps, it's cool!

Note

Early development. API may change. Building in public on X/Twitter. Your feedback and contributions are welcomed!

🎬 Getting Started

1. Install the CLI

dart pub global activate orient_ui

2. Initialize

Navigate to your Flutter project and run:

orient_ui init

This creates lib/styling.dart in your project. You own this file: move it wherever you want (e.g., lib/core/styling.dart).

3. Wrap Your App

Wrap your MaterialApp with the Styling widget:

import 'package:your_app/styling.dart'; // adjust path if you moved it

void main() {
  runApp(
    Styling(
      brightness: Brightness.light, // or Brightness.dark
      child: MaterialApp(
        home: MyHomePage(),
      ),
    ),
  );
}

4. Add Components

orient_ui add button

This creates lib/button.dart. Move it wherever you want (e.g., lib/widgets/button.dart).

Important: Update the import inside the component file to match where you placed styling.dart:

// In button.dart, update this line:
import 'package:your_app/styling.dart'; // adjust to your path

5. Use Components

import 'package:your_app/button.dart'; // your path

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

📦 Available Commands

orient_ui init          # Initialize styling system
orient_ui add           # List available components
orient_ui add <widget>  # Add a specific widget

🎨 Components

Available Now

  • x Button (6 variants)
  • x Spinner
  • x NavBar (Navigation Rail + Bottom Bar)
  • x Toast
  • x EmptyState
  • x CopyButton
  • x Popup
  • x AlertPopup
  • x ConfirmationPopup
  • x SearchField
  • x Toggle
  • x ToggleTile
  • x Tile
  • x CardBox

In Progress

  • TextField

Coming Soon

  • Tabs
  • InlineTabs
  • Radio
  • RadioTile
  • Menu

Check them out at interactive web demo.

✅ Quality

Tests

All widgets are tested for rendering, interaction, accessibility, and theming.

✨ Customizing Colors

The styling.dart file contains AppColors with light and dark theme defaults. Edit them to match your brand:

static const light = AppColors(
  primary: Color(0xFF18181B),       // your primary color
  primaryForeground: Color(0xFFFAFAFA),
  // ... customize all colors
);

📄 License

MIT

Built by the team at UserOrient

Libraries