Introduction

Frontile is a component library for Ember.js applications, built with Tailwind CSS and Tailwind Variants.

Why Frontile?

Frontile provides components, helpers, modifiers, and styles for building Ember.js apps, offering both low-level primitives and high-level components.

Key Features

• Built for Ember – Integrates with Ember Octane & Glimmer components
• Accessibility – ARIA attributes, keyboard navigation, and focus management built into every component
• Customizable – Uses Tailwind CSS with Tailwind Variants for styling
• TypeScript & Glint Support – Fully typed templates with Glint
• Theme Support – Dark & light mode support with theme-aware components
• Responsive foundations – Components can be composed with Tailwind CSS responsive utilities
• Composable & Extensible – Designed to be customized and extended to fit any design system

Quick Start

Get started with Frontile in just a few steps:

Installation

pnpm install frontile @frontile/theme

Basic Setup

Add Frontile's theme configuration to your app/styles/app.css for Tailwind CSS v4:

@import 'tailwindcss' source('../../');
@plugin "@frontile/theme/plugin/default";
@import "@frontile/theme";

/* Tailwind skips node_modules when scanning for classes, so Frontile's own
   templates have to be pointed at or their classes get purged. */
@source '../../node_modules/frontile';
@source '../../node_modules/@frontile';

Paths are relative to the CSS file. Under Vite the entry stylesheet is usually app/app.css, one level shallower, so the sources become '../node_modules/...'.

The dark variant comes from @import "@frontile/theme" — you do not need to declare @custom-variant dark yourself, and the version the theme ships also handles theme-inverse.

Your First Component

import Component from '@glimmer/component';
import { Button } from 'frontile';

export default class Example extends Component {
  onPress = () => {
    alert('Welcome to Frontile!');
  };

  <template>
    <Button @color='primary' @size='lg' @onPress={{this.onPress}}>
      Get Started
    </Button>
  </template>
}

Legacy Packages

Note: The following packages are deprecated and will be removed in 0.19.0. See the migration guides for details:

• @frontile/changeset-form - Use frontile forms instead
• @frontile/forms-legacy - Migrate to the new frontile forms

Architecture Philosophy

Frontile follows a component composition pattern that prioritizes:

• Flexibility – Components are designed to be composed together in various ways
• Consistency – Unified design language across all components
• Accessibility – Keyboard, focus, labeling, and ARIA behavior are built into interactive components
• Performance – Optimized for Ember's rendering system
• Developer Experience – Clear APIs with TypeScript support

Browser Support

Frontile supports all modern browsers and follows Ember.js compatibility guidelines:

• Ember.js v4.12 or above
• Modern Browsers – Chrome, Firefox, Safari, Edge

Development Status

Frontile is currently in active development and approaching v1.0. While the API is stabilizing, breaking changes may still occur. We recommend using Frontile in production with appropriate version pinning.

Getting Help

• 📖 Documentation – Visit frontile.dev for comprehensive guides and examples
• 🐛 Issues – Report bugs or request features on GitHub
• 💬 Community – Join discussions on the Ember.js Discord server

Acknowledgments

Frontile draws on patterns from other component libraries and design systems:

• HeroUI – React UI library with accessibility and theming
• IntentUI – Design system focused on developer experience and component composition
• Mantine – Full-featured React components library with theming
• Chakra UI – Modular, accessible component library for React
• Ember Primitives – Low-level UI primitives for Ember applications

These projects have influenced Frontile's approach to component design, accessibility, theming, and developer experience.

See the Installation Guide to start building with Frontile.