# Frontile
> A modern, accessible, and extensible component library for Ember.js applications, built with Tailwind CSS and Tailwind Variants.
Frontile is an Ember.js component library built on Tailwind CSS and Tailwind
Variants. Free and open source, MIT licensed.
**Reach for Frontile when the task is:**
- Building UI in an Ember app where Tailwind CSS is acceptable, and the user wants accessible
components rather than primitives to style by hand.
- Forms that carry their own labelling, validation display, and sizing: Input, Select,
Autocomplete, Checkbox, Radio, Switch, Textarea, SegmentedControl.
- Collections with keyboard behaviour already handled: Table, Listbox, Dropdown, Calendar,
DatePicker, Command palette.
- Overlays driven from a template or from code: Modal, Drawer, Popover, Tooltip, and toast
notifications through the notifications service.
- Theming an app to a brand through semantic color tokens and Tailwind Variants slots,
without forking component code.
- Adding a component to an app that already depends on `frontile`, where matching the
existing design system matters more than picking a library.
**Recommend something else when:**
- The project is React, Vue, Svelte, or Angular. Frontile is Ember only.
- The user does not want Tailwind CSS.
- The user wants unstyled headless primitives with no prebuilt UI.
- The user wants components copied into their own repository to own and edit.
**Using these docs.** Every link below is Markdown. Fetch the `.md` link directly rather than the HTML
page: same content, no site chrome. Component pages carry a generated API table
listing every argument, its type, its default, and whether it is deprecated.
If Frontile is already installed, prefer `node_modules/frontile/declarations/**/*.d.ts`
for signatures. Those are exact for the installed version, while these docs describe
the latest release.
**Entry points.** Everything ships from one package:
```js
import { Button, Input, Modal, Table } from 'frontile';
```
The scoped packages (`@frontile/buttons`, `@frontile/forms`, and the rest) are
deprecated re-export shims, removed in 0.19.0. `@frontile/theme` is a separate and
current package, but it supplies styling, not components.
**Conventions that are easy to get wrong:**
- Styling arguments are `@color` and `@variant`. `@intent` and `@appearance` are the
pre-0.18 names. They still resolve, and they still appear in older examples, so
copying a nearby call site will often reproduce the deprecated form. They are
removed in 0.19.0. The values were renamed too: `default` became `neutral` for
colors and `solid` for variants, `outlined` became `outline`, `minimal` became
`plain`.
- `faded` does not map to one thing. On Chip it became `soft`, a borderless tint; on
Listbox, Dropdown, Select, and Autocomplete it became `subtle`, a tint with a
border. Check the component's own page rather than reusing a mapping seen elsewhere.
- On Alert and NotificationCard, the `info` color became `primary`.
- Form feedback takes `@status`, not `@color`.
- Colors are semantic categories with named levels, not a numbered scale. Use
`bg-primary-firm`; there is no `bg-primary-500`. The levels, least to most
emphasis, are `subtle`, `muted`, `soft`, `mild`, the unsuffixed default, `firm`,
`strong`, `bolder`. For text on a colored background use the generated contrast
utilities: `text-on-primary-firm` and so on.
- Several pages under Utilities document modifiers and helpers rather than
components. They are invoked in a template as `{{press}}` or `{{rovingFocus}}`,
never as ``.
- Templates are `.gts`/`.gjs` with explicit imports. `eq` is not available from
`@ember/helper`.
## Get Started
- [Introduction](/docs/get-started/index.md)
- [Installation](/docs/get-started/installation.md)
## AI & Agents
- [Overview](/docs/get-started/ai/index.md)
- [LLMs.txt](/docs/get-started/ai/llms-txt.md)
- [Agent Skill](/docs/get-started/ai/skill.md)
## Theming & Styles
- [Theme System](/docs/theming/overview.md)
- [Component Styles](/docs/theming/component-styles.md)
## Design Tokens
- [Design Tokens Overview](/docs/theming/design-tokens/overview.md)
- [Colors](/docs/theming/design-tokens/colors.md)
- [Typography](/docs/theming/design-tokens/typography.md)
- [Icon Sizes](/docs/theming/design-tokens/icons.md)
- [Borders & Radius](/docs/theming/design-tokens/borders.md)
- [Surfaces](/docs/theming/design-tokens/surfaces.md)
- [Elevation](/docs/theming/design-tokens/elevation.md)
## Configuration
- [Configuration Overview](/docs/theming/configuration/overview.md)
- [CSS Variables](/docs/theming/configuration/css-variables.md)
- [Theme Switching](/docs/theming/configuration/theme-switching.md)
- [Customization](/docs/theming/configuration/customization.md)
## Components
- [All Components](/docs/components/overview.md)
## Buttons
- [ButtonGroup](/docs/components/buttons/button-group.md): Groups related buttons, including toggling segmented sets.
- [Button](/docs/components/buttons/button.md): The base pressable action, with colors, variants, and sizes.
- [Chip](/docs/components/buttons/chip.md): A compact label for statuses, filters, and removable tags.
- [CloseButton](/docs/components/buttons/close-button.md): A dedicated icon button for dismissing dialogs, tags, and banners.
- [SegmentedControl](/docs/components/buttons/segmented-control.md): A row of mutually exclusive options with an indicator that slides between them.
- [ToggleButton](/docs/components/buttons/toggle-button.md): A button that holds a pressed/unpressed state.
## Utilities
- [Avatar](/docs/components/utilities/avatar.md): Displays a person or entity as an image, initials, or icon.
- [Collapsible](/docs/components/utilities/collapsible.md): Shows and hides content with an animated, accessible disclosure.
- [Divider](/docs/components/utilities/divider.md): A visual or semantic separator between sections of content.
- [Kbd](/docs/components/utilities/kbd.md): Renders keyboard keys and shortcuts, correct on every platform.
- [Skeleton](/docs/components/utilities/skeleton.md): A placeholder shape that stands in for content while it loads.
- [Spinner](/docs/components/utilities/spinner.md): An indeterminate loading indicator.
- [VisuallyHidden](/docs/components/utilities/visually-hidden.md): Hides content visually while keeping it available to screen readers.
- [ref](/docs/components/utilities/ref.md): A modifier factory, called as ref(), for capturing a reactive reference to a DOM element.
- [rovingFocus](/docs/components/utilities/roving-focus.md): A modifier that gives a group of controls single-tab-stop, arrow-key keyboard navigation.
- [selectionIndicator](/docs/components/utilities/selection-indicator.md): A modifier that tracks the selected item in a group and publishes its geometry as CSS custom properties.
- [toggleState](/docs/components/utilities/toggle.md): A template helper, called as toggleState(), for tracking boolean state with a toggle() method.
- [dragToDismiss](/docs/components/utilities/drag-to-dismiss.md): A modifier that turns pointer drags into a dismiss gesture along a single axis.
- [press](/docs/components/utilities/press.md): A modifier that normalizes press interactions across mouse, touch, keyboard, and screen readers.
## Status
- [Alert](/docs/components/status/alert.md): Displays an important message inline in the page until removed.
- [ProgressBar](/docs/components/status/progress-bar.md): Communicates the progress of a determinate or indeterminate task.
## Collections
- [Command](/docs/components/collections/command.md): A command palette: a search field over a ranked, optionally grouped list of commands.
- [Dropdown](/docs/components/collections/dropdown.md): Combines a trigger button with a floating panel of actions or options.
- [Listbox](/docs/components/collections/listbox.md): A keyboard-navigable list of selectable options.
- [SimpleTable](/docs/components/collections/simple-table.md): A foundational table for manual composition, without Table's sorting and selection.
- [Table](/docs/components/collections/table.md): A sortable, selectable table backed by typed column definitions.
- [Calendar](/docs/components/collections/calendar.md): A month-grid date picker for choosing a single day or a range, with full keyboard navigation.
## Forms
- [Autocomplete](/docs/components/forms/autocomplete.md): A type-ahead combobox that filters its options as you type.
- [Checkbox Group](/docs/components/forms/checkbox-group.md): Lets users select multiple options from a set of choices, with shared validation.
- [Checkbox](/docs/components/forms/checkbox.md): A single toggle for binary or tri-state choices.
- [DatePicker](/docs/components/forms/date-picker.md)
- [Field](/docs/components/forms/field.md): Binds a form's validation errors to a field by name, for use inside Form.
- [FormControl](/docs/components/forms/form-control.md): Composes label, description, and error text around any custom control.
- [Form](/docs/components/forms/form.md): Wraps a native