RonakCN

Usage

How to use RonakCN components in your Flutter app.

Basic setup

Wrap your app with RcnTheme to apply the design tokens and enable light/dark mode switching across all components.

lib/main.dart
import 'package:flutter/material.dart';
import 'package:my_app/components/theme/rcn_theme.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return RcnTheme(
      // 'system' follows the device setting, or use ThemeMode.dark / ThemeMode.light
      themeMode: ThemeMode.system,
      child: MaterialApp(
        title: 'My App',
        home: const HomePage(),
      ),
    );
  }
}

Importing components

After running ronakcn add button, the component is copied into your project under lib/components/. Import it with a relative path — you own the file, so the import is always local:

lib/pages/home.dart
// The file lives at lib/components/button/button.dart
import '../components/button/button.dart';

// If you're in lib/pages/home.dart:
import 'package:my_app/components/button/button.dart';

Using a component

Drop any component into your widget tree like any other Flutter widget:

lib/pages/home.dart
import 'package:flutter/material.dart';
import 'package:my_app/components/button/button.dart';

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Home')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            RcnButton(
              child: const Text('Get started'),
              onPressed: () => print('tapped'),
            ),
            const SizedBox(height: 12),
            RcnButton(
              variant: ButtonVariant.outline,
              child: const Text('Learn more'),
              onPressed: () {},
            ),
          ],
        ),
      ),
    );
  }
}

Customizing

You own the code

Unlike packages from pub.dev, RonakCN components live directly in your project. Open the file and change anything — no need to fork or override.

To customise a component, open its file and edit it directly:

lib/components/button/button.dart
// lib/components/button/button.dart
// Change the default border radius from 8 to 12:
decoration: BoxDecoration(
  color: _backgroundColor(context),
  borderRadius: BorderRadius.circular(12), // ← edit freely
),

Combining components

Components compose naturally. Here is a Button nested inside a Card:

lib/widgets/confirm_dialog.dart
import 'package:my_app/components/button/button.dart';
import 'package:my_app/components/card/card.dart';

RcnCard(
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      const Text(
        'Confirm action',
        style: TextStyle(fontSize: 16, fontWeight: FontWeight.w600),
      ),
      const SizedBox(height: 8),
      const Text(
        'Are you sure you want to continue? This cannot be undone.',
        style: TextStyle(fontSize: 14),
      ),
      const SizedBox(height: 16),
      Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          RcnButton(
            variant: ButtonVariant.ghost,
            child: const Text('Cancel'),
            onPressed: () {},
          ),
          const SizedBox(width: 8),
          RcnButton(
            variant: ButtonVariant.destructive,
            child: const Text('Confirm'),
            onPressed: () {},
          ),
        ],
      ),
    ],
  ),
)

RTL usage

All RonakCN components support right-to-left layouts out of the box. Wrap your app (or any subtree) with Directionality to switch direction:

lib/pages/rtl_example.dart
Directionality(
  textDirection: TextDirection.rtl,
  child: RcnButton(
    child: const Text('دەستپێبکە'), // Kurdish: "Get started"
    onPressed: () {},
  ),
)

For app-wide RTL, set the locale on your MaterialApp. Flutter will automatically apply the correct text direction based on the locale. See the RTL support guide for a full walkthrough.

Next steps

ThemingBrowse components