Components

Reusable mobile UI library

CodideX Mobile UI Kit

Reusable components for a complete school ERP app

Grouped navigation, content, actions, forms, feedback, communication, auth, settings, and payment UI patterns built with the same mobile-first CodideX styling.

Open Payment Demo Open Auth Flow

NavigationHeaders, tabs, bottom menus

CardsKPI, profile, fee, content

FormsInputs, OTP, password, selects

FeedbackToasts, modals, success states

Navigation

App shell

App HeaderBrand, title, action area and notifications.

App Bottom MenuTouch-friendly role navigation.Demo

TabsSegmented app and preview selectors.

SearchSearch bars for lists and centers.

Back HeaderCompact drill-down page headers.

Role SelectorStudent, teacher, employee and parent auth entry.Demo

Content

Reusable

CardsDashboard, status and detail containers.

List ViewDense rows for notices, payments and requests.

GridQuick actions, KPIs and feature groups.

TimelineAcademic, support and status progress rows.

Content BoxesNotes, details and preview placeholders.

Profile HeroRole profile context with grey display avatar.

KPI CardsAttendance, due, salary and result highlights.

Actions

Touch ready

Icon ButtonsCompact notification, theme and tool controls.

ActiveDue

Toggle SwitchesSettings and preference controls.

Quick Action CardsDashboard shortcuts for common workflows.

Forms

Inputs

Text input Password with eye pattern Select / dropdown Checkbox option Radio option

Feedback

States

AlertsInline info, warning and success states.

ToastsSmall feedback messages for demo actions.

DialogConfirmation and modal panel examples.

NotificationsCards, badges and unread states.

PreloaderMobile app loading and success states.

Communication

Chat

Your answer is correct. Add one more solution step.

Teacher reply

Thank you, I will update it now.

Read

Chat ComposerAttach, voice preview and send arrow controls.Demo

Attachment PreviewFrontend file picker demo patterns.

Notification CardsRole-specific school communication cards.Demo

Auth & Settings

Frontend only

Splash ScreenBranded mobile app entry.Demo

Login CardRole-aware login preview.Demo

Signup CardEmail, phone and terms controls.Demo

OTP VerificationSix-box frontend OTP pattern.Demo

Account Settings RowNotification, profile and security lists.Demo

Payment UI

Dummy gateway

Fee Summary CardDue amount, invoice and breakdown.Demo

Payment Method CardCash, Card, UPI and Net Banking previews.Demo

Dummy GatewayGateway-like frontend UI without SDK integration.

Payment Success CardSuccess state and transaction placeholder.Demo

Receipt PlaceholderBasic receipt preview, no real PDF generation.Demo

Print & Documents

Preview UI

Fee Receipt PreviewStudent and parent receipt cards with totals and signature area.Demo

Salary Slip PreviewTeacher and employee salary slips with earnings and deductions.Demo

Print ButtonFrontend print action using window.print().

Dummy PDF Download ButtonPreview toast only, no generated file.

Payment History CardPaid, pending and failed records with receipt actions.Demo

Breakdown TableFee heads, earnings, deductions, subtotal and total rows.