Cuppa Framework
A modular, plugin-first framework with production-ready components for Web, iOS, and Android.
UI Components
Production-ready components organized by atomic design principles. From design tokens to complete screens.
📱 ScreensComplete page templates
DashboardScreen
Analytics dashboard with charts, KPIs, and activity feed.
@cuppa/screen-dashboardEditProfileScreen
Profile editing form with image upload and validation.
@cuppa/screen-edit-profileForgotPasswordScreen
Password recovery screen with email-based reset flow.
@cuppa/screen-forgot-passwordLoginScreen
Complete login screen with email/password, social auth, and forgot password flow.
@cuppa/screen-loginNotificationSettingsScreen
Notification preferences with granular controls and toggles.
@cuppa/screen-notification-settingsProfileScreen
User profile view with avatar, bio, and activity summary.
@cuppa/screen-profileSettingsScreen
Comprehensive settings screen with sections for account, notifications, and privacy.
@cuppa/screen-settingsSignupScreen
User registration screen with email verification and terms acceptance.
@cuppa/screen-signupTutorialScreen
Multi-step tutorial carousel with progress indicators.
@cuppa/screen-tutorialWelcomeScreen
Intro screen with app highlights and call-to-action.
@cuppa/screen-welcome🧩 OrganismsComplex sections and layouts
ConfirmDialog
Confirmation modal with customizable actions and messaging.
@cuppa/organism-confirm-dialogContactForm
Multi-field contact form with file attachments.
@cuppa/organism-contact-formDataTable
Advanced data table with sorting, pagination, and row selection.
@cuppa/organism-data-tableFilterableList
List with search, filters, and sorting controls.
@cuppa/organism-filterable-listImageGalleryModal
Full-screen image viewer with zoom and swipe navigation.
@cuppa/organism-image-galleryInfiniteList
Virtualized infinite scroll list with pull-to-refresh.
@cuppa/organism-infinite-listLoginForm
Email/password login form with validation and error handling.
@cuppa/organism-login-formNavigationBar
Responsive top navigation with menu, search, and user actions.
@cuppa/organism-navbarProductCard
E-commerce product card with image, price, and add-to-cart.
@cuppa/organism-product-cardSidebarMenu
Collapsible sidebar with nested menu items and icons.
@cuppa/organism-sidebarTabBar
Bottom navigation tabs for mobile apps.
@cuppa/organism-tabbarUserCard
User profile card with avatar, stats, and follow button.
@cuppa/organism-user-cardUserProfileCard
Reusable user profile card showing avatar, name, bio, and action buttons.
@mycuppa/organism-profile-card⚛️ MoleculesMedium composite components
Alert
Inline alert with variants (info, success, warning, error).
@cuppa/molecule-alertAvatar
User avatar with fallback initials and status indicator.
@cuppa/molecule-avatarBadge
Label badge for status, counts, and tags.
@cuppa/molecule-badgeButton
Versatile button with variants (primary, secondary, outline, ghost).
@cuppa/molecule-buttonButtonGroup
Segmented control with multiple button options.
@cuppa/molecule-button-groupCard
Container card with header, body, and footer sections.
@cuppa/molecule-cardCheckbox
Checkbox with label and indeterminate state support.
@cuppa/molecule-checkboxChip
Compact chip with icon and remove action.
@cuppa/molecule-chipDropdown
Select dropdown with search and multi-select options.
@cuppa/molecule-dropdownIconButton
Circular button with icon, used for actions and toolbars.
@cuppa/molecule-icon-buttonPopover
Clickable popover with rich content support.
@cuppa/molecule-popoverProgressBar
Linear progress indicator with percentage display.
@cuppa/molecule-progress-barRadioButton
Radio button for mutually exclusive selections.
@cuppa/molecule-radioSearchBar
Search input with icon, clear button, and autocomplete.
@cuppa/molecule-search-barSkeleton
Content placeholder with shimmer animation.
@cuppa/molecule-skeletonSlider
Range slider with min/max values and step control.
@cuppa/molecule-sliderSpinner
Loading spinner with size variants.
@cuppa/molecule-spinnerSwitch
Toggle switch for on/off states.
@cuppa/molecule-switchTextField
Text input with label, placeholder, and validation states.
@cuppa/molecule-text-fieldToast
Temporary notification with auto-dismiss and action button.
@cuppa/molecule-toastTooltip
Hoverable tooltip with positioning control.
@cuppa/molecule-tooltip🎨 Design TokensDesign primitives
ColorPalette
Brand color palette with light/dark mode variants.
@cuppa/tokens-colorsDesignTokens
Complete design token system with semantic naming.
@cuppa/tokensLayoutGrid
Responsive grid system with breakpoints.
@cuppa/tokens-layoutSpacing
Consistent spacing scale for margins and padding.
@cuppa/tokens-spacingTypography
Font scale with heading and body text styles.
@cuppa/tokens-typography