kin_ui 1.0.0

A Native inspired Flutter design system. Tokens, primitives, components, adaptive shell, and templates out of the box.

example/main.dart

import 'package:flutter/material.dart';
import 'package:kin_ui/kin_ui.dart';

// ── Define your own theme ────────────────────────────────────────
const _lightTheme = KinTheme(
  primary: Color(0xFF6C63FF),
  primaryContainer: Color(0xFFE8E6FF),
  surface: Color(0xFFF5F5F0),
  surfaceVariant: Color(0xFFFFFFFF),
  onSurface: Color(0xFF1C1C1E),
  onSurfaceVariant: Color(0xFF8E8E93),
  outline: Color(0xFFE0E0E0),
  destructive: Color(0xFFFF453A),
);

const _darkTheme = KinTheme(
  primary: Color(0xFF6C63FF),
  primaryContainer: Color(0xFF3D35A3),
  surface: Color(0xFF1C1C1E),
  surfaceVariant: Color(0xFF2C2C2E),
  onSurface: Color(0xFFFFFFFF),
  onSurfaceVariant: Color(0xFF8E8E93),
  outline: Color(0xFF3A3A3C),
  destructive: Color(0xFFFF453A),
);

void main() => runApp(const ExampleApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        useMaterial3: true,
        brightness: Brightness.light,
        scaffoldBackgroundColor: _lightTheme.surface,
        colorScheme: ColorScheme.light(
          primary: _lightTheme.primary,
          surface: _lightTheme.surface,
          onSurface: _lightTheme.onSurface,
          error: _lightTheme.destructive,
          outline: _lightTheme.outline,
        ),
        extensions: const [_lightTheme],
      ),
      darkTheme: ThemeData(
        useMaterial3: true,
        brightness: Brightness.dark,
        scaffoldBackgroundColor: _darkTheme.surface,
        colorScheme: ColorScheme.dark(
          primary: _darkTheme.primary,
          surface: _darkTheme.surface,
          onSurface: _darkTheme.onSurface,
          error: _darkTheme.destructive,
          outline: _darkTheme.outline,
        ),
        extensions: const [_darkTheme],
      ),
      home: const KinApp(child: _Home()),
    );
  }
}

class _Home extends StatelessWidget {
  const _Home();

  @override
  Widget build(BuildContext context) {
    final theme = KinTheme.of(context);
    return Scaffold(
      body: SafeArea(
        child: Padding(
          padding: EdgeInsets.all(KinSpacing.md),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              KinText.titleLarge('Kin UI Example', color: theme.onSurface),
              SizedBox(height: KinSpacing.md),
              KinCard(
                child: Padding(
                  padding: EdgeInsets.all(KinSpacing.md),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      KinText.titleMedium('Welcome', color: theme.onSurface),
                      SizedBox(height: KinSpacing.sm),
                      KinText.bodyMedium(
                        'This example uses a custom theme. '
                        'Define your own KinTheme to match your brand.',
                        color: theme.onSurfaceVariant,
                      ),
                    ],
                  ),
                ),
              ),
              SizedBox(height: KinSpacing.md),
              KinButton(
                label: 'Primary Action',
                onTap: () {},
                variant: KinButtonVariant.primary,
              ),
              SizedBox(height: KinSpacing.sm),
              KinButton(
                label: 'Secondary Action',
                onTap: () {},
                variant: KinButtonVariant.secondary,
              ),
            ],
          ),
        ),
      ),
    );
  }
}