Documentation Index

Fetch the complete documentation index at: https://mintlify.com/PapillonApp/Papillon/llms.txt

Use this file to discover all available pages before exploring further.

​

Papillon UI

​

Overview

• Performance — Heavily optimized components using Reanimated 2 and memoization
• Accessibility — Built-in support for screen readers and keyboard navigation
• Theming — Seamless light and dark mode support with React Navigation theming
• Developer Experience — Full TypeScript support with comprehensive prop types
• Native Feel — Platform-specific behaviors and animations

​

Key Features

​

Animations

• Layout transitions
• Press animations
• Enter/exit animations
• Gesture-based interactions

​

Typography System

• Headings (h0-h6)
• Body text (body1, body2)
• UI elements (title, button, caption, navigation)

​

Component Composition

<List>
  <Item onPress={() => {}}>
    <Item.Leading>
      <Icon>
        <UserIcon />
      </Icon>
    </Item.Leading>
    <Typography variant="title">John Doe</Typography>
    <Typography variant="caption" color="secondary">Student</Typography>
    <Item.Trailing>
      <ChevronRight />
    </Item.Trailing>
  </Item>
</List>

​

Component Categories

​

Layout Components

• List — Container for list items with automatic borders and padding
• Item — List item with leading/trailing slots and press animations
• Stack — Flexible layout container with gap, padding, and alignment controls

​

Input Components

• Button — Pressable button with multiple variants and states
• AnimatedPressable — Low-level pressable with scale animations

​

Display Components

• Typography — Text rendering with semantic variants
• Course — Display timetable course cards with status and colors
• Grade — Show grade information with scores and dates
• Task — Homework task cards with completion status
• Icon — Icon wrapper with theme integration

​

Utility Components

• SkeletonView — Loading state placeholders
• ActivityIndicator — Loading spinners
• Avatar — User profile pictures

​

Technology Stack

{
  "react-native": "0.81.5",
  "react-native-reanimated": "~4.1.1",
  "@react-navigation/native": "^7.1.8",
  "expo": "~54.0.32"
}

​

License

​

Next Steps