Frontile is a comprehensive component library for Ember.js that provides all the components you need in a single package. Modern build tools with tree-shaking will ensure only the components you use are included in your final bundle.
Install the main frontile package along with the theme:
pnpm install frontile @frontile/theme
That's it! You now have access to all Frontile components:
import { Button, Input, Modal, Table } from 'frontile';
With modern build tools and explicit imports (.gts/.gjs), only the components you import will be included in your application bundle through tree-shaking.
Note: The following packages are deprecated and will be removed before v1 release:
@frontile/changeset-form- Usefrontileforms instead@frontile/forms-legacy- Migrate to the newfrontileformsIf you're currently using the separate scoped packages (
@frontile/buttons,@frontile/forms, etc.), you can migrate to the consolidatedfrontilepackage. Simply update your imports:- import { Button } from '@frontile/buttons'; + import { Button } from 'frontile';
For the default theme, add this to your app/styles/app.css:
@import 'tailwindcss' source('../../');
@plugin "@frontile/theme/plugin/default";
@import "@frontile/theme";
/* Tailwind v4 skips node_modules when scanning for classes. Without these,
Frontile's own component classes are purged and components render unstyled. */
@source '../../node_modules/frontile';
@source '../../node_modules/@frontile';
Paths are relative to this file — under Vite, where the entry stylesheet is
usually app/app.css, they are one level shallower.
To customize the frontile theme, create a file in the root of your project named frontile.js with the following content:
const { frontile } = require('@frontile/theme/plugin');
module.exports = frontile({
/* your config */
});
Then update your app/styles/app.css to use the custom configuration:
@import 'tailwindcss' source('../../');
@plugin "./../../frontile.js";
@import "@frontile/theme";
For more advanced configuration options, see the Theme documentation .