Skip to main content

​
Papillon UI

Papillon UI is the official component library powering the Papillon app. Built with React Native, it provides a comprehensive set of components designed for modern student life management applications.

​
Overview

Papillon UI is a carefully crafted component library that prioritizes:
  • 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

Getting Started

Install and start using Papillon UI in your project

Components

Explore the complete component library

​
Key Features

​
Animations

All components use React Native Reanimated 2 for smooth, performant animations. Components include:
  • Layout transitions
  • Press animations
  • Enter/exit animations
  • Gesture-based interactions

​
Typography System

Comprehensive typography system with 13 variants:
  • Headings (h0-h6)
  • Body text (body1, body2)
  • UI elements (title, button, caption, navigation)

​
Component Composition

Components are designed to be composed together: 
<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

Papillon UI is part of the Papillon project and is licensed under GPL-3.0.
Papillon UI is designed specifically for the Papillon app. While you can use it in your own projects, it’s optimized for student life management use cases.

​
Next Steps

1

Installation

Learn how to install and configure Papillon UI in your projectView Getting Started Guide →
2

Explore Components

Browse the complete component documentation with examplesView Components →
3

Contribute

Help improve Papillon UI by contributing to the projectView Contributing Guide →

Build docs developers (and LLMs) love

Get started for freeTalk to us