alouette

A modern, customizable design system built on top of Tamagui with configurable defaults

🚀 Getting Started

Prerequisites

• Node.js >= 20.9.0 (includes Corepack for package management)

Installation

1. Enable Corepack (if not already enabled):

corepack enable

2. Install the package:

npm install alouette
# or with yarn
yarn add alouette

Note: alouette-icons is automatically included as a dependency.

Configuration

Create or update your tamagui.config.ts:

import {
  createAlouetteTamagui,
  defaultColorScales,
  createAlouetteTokens,
  createAlouetteThemes,
} from "alouette/createAlouetteTamagui";

const tokens = createAlouetteTokens(defaultColorScales);
const config = createAlouetteTamagui(tokens, createAlouetteThemes(tokens));

export default config;

🎨 Core Features

Components

Alouette provides a comprehensive set of components following the atomic design pattern:

Actions

• Button: Primary interaction component with multiple variants
• IconButton: Circular button optimized for icon display

Containers

• Box: Basic layout container with theme support
• PressableBox: Interactive container with press states

Forms

• InputText: Text input with theming and state management

Layout

• Separator: Visual divider with customizable orientation
• List: Structured data display components

Typography

• Typography: Text component with semantic variants

For detailed examples and API documentation, visit our Storybook.

Icons

Icons are provided through the integrated alouette-icons package:

import { ArrowLeftRegularIcon } from "alouette-icons/phosphor-icons";

function MyComponent() {
  return <ArrowLeftRegularIcon />;
}

🏗️ Architecture

Core Principles

1. Universal Design: Components work seamlessly across web and native platforms
2. Performance First: Optimized bundle size and runtime performance through Tamagui
3. Accessibility: WCAG 2.1 compliant components with proper ARIA attributes
4. Customization: Flexible theming system with sensible defaults
5. Type Safety: Built with TypeScript for enhanced developer experience

Technical Architecture

• Component Structure: Atomic design pattern with atoms, molecules, and organisms
• Styling System: Tamagui's compile-time styling with runtime fallbacks
• Theme System: Token-based design system with support for light/dark modes
• Responsive Design: Mobile-first approach with flexible breakpoint system
• Icon System: Based on Phosphor Icons with optimized bundle size

🎯 Examples

Basic Button

import { Button } from "alouette";

function MyComponent() {
  return (
    <Button
      theme="primary"
      text="Click me"
      onPress={() => console.log("Clicked!")}
    />
  );
}

Button with Icon

import { Button } from "alouette";
import { ArrowLeftRegularIcon } from "alouette-icons/phosphor-icons";

function MyComponent() {
  return (
    <Button theme="primary" icon={<ArrowLeftRegularIcon />} text="Go Back" />
  );
}

Typography

import { Typography } from "alouette";

function MyComponent() {
  return (
    <>
      <Typography variant="h1">Heading 1</Typography>
      <Typography variant="body">Regular text content</Typography>
    </>
  );
}

📚 Documentation

For more examples and detailed documentation:

• Component Documentation
• GitHub Repository

📄 License

ISC © Christophe Hurpeau