allo-ui

The official component library for Allo mini-apps. Mobile-first, themable, TypeScript-first React components matched to the Allo design system — the same primitives the in-house Allo mini-apps are built with.

npm install allo-ui
# or
yarn add allo-ui

Quick start

import 'allo-ui/allo.css'
import { App, AlloRouter, AnimationRoutes, Page, Button } from 'allo-ui'

export default function MyMiniApp() {
  return (
    <App>
      <AlloRouter>
        <AnimationRoutes>
          <Page path="/" title="Welcome">
            <Button variant="primary" onClick={() => alert('Hi')}>Tap me</Button>
          </Page>
        </AnimationRoutes>
      </AlloRouter>
    </App>
  )
}

The single allo.css import wires up the design tokens, animations, and base styles. Components are tree-shakeable — only what you import lands in your bundle.

What's in the box

Layout & navigation — App, Page, AlloRouter, AnimationRoutes, Tabs, BottomNavigation, Header, Modal, Sheet, Portal, Swiper, Grid, Stack, Cluster, Box, Center.

Form controls — Input (text, password, search, OTP, textarea), Select, Picker, Checkbox, Radio, Switch, Slider, DatePicker, Calendar.

Display — Button, Avatar, Text, Icon, List, ImageViewer, Progress, Spinner.

Feedback — Trigger, SnackbarProvider, Modal.

Hooks — useBuffer, useEvent, useLayoutUpdateEffect.

Peer dependencies

allo-ui is a UI layer, not a framework — bring your own React:

npm install react react-dom react-router-dom @babel/runtime clsx \
            react-transition-group react-is @react-spring/web @use-gesture/react

TypeScript

Ships with full .d.ts declarations alongside the JS. No @types/allo-ui needed.

Design tokens

Design tokens (colours, spacing, typography, motion) ride along inside allo.css as CSS variables, and a tailwind preset is available at allo-ui/tailwind.config.json for Tailwind-based mini-apps.

Compatibility

• React 17 / 18
• Allo iOS / Android WebView, Mini App Studio, modern desktop browsers
• ESM-first, CJS fallback

License

ISC — see LICENSE.