ionic-design

name	ionic-design
description	Guide to using Ionic Framework components for beautiful native-looking Capacitor apps. Covers component usage, theming, platform-specific styling, and best practices for mobile UI. Use this skill when users need help with Ionic components or mobile UI design.

Ionic Framework Design Guide

Build beautiful, native-looking mobile apps with Ionic Framework and Capacitor.

When to Use This Skill

• User is using Ionic components
• User wants native-looking UI
• User asks about Ionic theming
• User needs mobile UI patterns
• User wants platform-specific styling

What is Ionic Framework?

Ionic provides:

• 100+ mobile-optimized UI components
• Automatic iOS/Android platform styling
• Built-in dark mode support
• Accessibility out of the box
• Works with React, Vue, Angular, or vanilla JS

Getting Started

Installation

# For React
npx create-vite@latest my-app --template react-ts
cd my-app
npm install @ionic/react @ionic/react-router

# For Vue
npx create-vite@latest my-app --template vue-ts
cd my-app
npm install @ionic/vue @ionic/vue-router

# Add Capacitor
npm install @capacitor/core @capacitor/cli
npx cap init

Setup (React)

// main.tsx
import React from 'react';
import { createRoot } from ;
 { , setupIonicReact }  ;
   ;


 ;


 ;
 ;
 ;


 ;
 ;
 ;
 ;
 ;
 ;


 ;

();

 root = (.()!);
root.(
  
);