Modules
Phoenix LiveView components with the LineOne design.
Joins Tailwind class lists so that a later class replaces an earlier one of the same kind.
What every component shares: ids, form fields and the color vocabulary.
LineOne's accordion and collapse: a list of sections that open under their titles, in LineOne's six styles (basic, border bottom, full bordered, divided items, primary, advanced).
LineOne's alerts: filled, outlined, soft and bordered, with an icon, an accent bar or a close button.
LineOne's application shell: the page frame, the main sidebar (the icon rail), the sidebar panel with its collapsible groups, the minimized panel, the sideblock and the horizontal navigation, the header, the right sidebar, the page header and the dark mode and monochrome toggles.
A text input with a list of suggestions under it, in LineOne's Tom Select look: the person types, the list narrows (or the server searches), and choosing a suggestion sets the field.
LineOne's avatars: an image or initials in a circle, a square, a squircle or any mask shape, with a status dot, a gradient ring, and stacked in groups.
LineOne's badges: filled, glowing, soft, outlined or bare text, with a dot, an icon or a remove button.
LineOne's breadcrumb: the links to the pages above the current one, then the current page.
LineOne's buttons: filled, outlined, soft, bordered, flat and glowing, in every theme color.
LineOne's cards: the white panel, bordered, filled with a theme color, glowing, gradient and gradient-outlined.
LineOne's Swiper carousels, without Swiper: slides on a CSS scroll-snap track, and the
LineaUI.Carousel hook for arrows, pagination, autoplay, keyboard, swipe and effects.
An ApexCharts chart with LineOne's skin (axis labels, grid lines, legend, tooltips, light and dark).
LineOne's checkboxes: basic (filled when checked) or outline (a colored check on a clear box), on a plain or a filled box, square or circle, in every theme color.
LineOne's copy to clipboard: a button that copies a text, and a field with a copy button joined to it.
A section that opens and closes under its trigger, with LineOne's 200ms height animation. It is
the piece LineOne's Collapse and Accordion pages are built from (see LineaUI.Components.Accordion).
A table with a search box, sortable headers, a pagination footer and row selection, in the
two looks LineOne shows: advanced (the Table Advanced page: a title bar with a search
that slides open, the table as a card, "Show 10 entries" and a pager underneath) and grid
(the Grid Table page: a search box on the right, sort arrows, "Showing 1 to 10 of 15
results" and Previous/Next).
LineOne's date pickers (flatpickr's calendar in LineOne's skin): one date, several dates or a range, with limits, disabled days, a custom text format, a time row, and a calendar that pops under the input or stays inline.
LineOne's divider: a hairline between stacked or side-by-side content, with optional text in the middle.
LineOne's drawer: a full-height panel that slides in from the left or the right over a dark
backdrop. Bare, it is a sliding frame for a menu; with a title (or a :header) and a :footer
it is a sheet, the panel a form or a detail opens in: a header with the title, its description
and the close ×, a body that scrolls, and a footer with the buttons.
LineOne's dropdown menu: a white box under its button with links and actions, groups split by separators, icons, a header, a search field, people.
The pieces LineOne's forms are made of: a caption, a help line, an error line and the
field wrapper that puts them around any control.
Icons: Hugeicons Stroke Rounded by name, and the small glyphs LineaUI's own components draw (the cross of a toast, the chevron of a select, the check of a checkbox, the tools of the text editor).
LineOne's text inputs: outlined or filled, rounded or pill, three sizes, icons inside, success and error states, and input masks.
Joins inputs, addons, selects and buttons into one row with shared borders, as LineOne's input groups do. Only the outer ends keep their rounded corners.
Crops its content to one of LineOne's mask shapes: squircle, reuleaux triangle, diamond, hexagon, octagon, star or heart.
LineOne's menu lists: a vertical list of links with one active entry.
LineOne's modal: a centered card over a dark backdrop, with LineOne's enter and leave animations.
A numeric field for money and quantities that shows the number the way the person's locale
writes it (1.234,56 in pt-BR, 1,234.56 in en) and submits the plain machine value
(1234.56).
The text of a number input, worked out on the server so the first paint already shows it.
What the overlays share: the on_open / on_close callbacks, which take an event name or a %JS{},
and the close glyph.
LineOne's pagination: a joined bar or divided buttons, rounded or pill, in three sizes.
LineOne's popover: a white card with an arrow next to its trigger, for more than a tooltip holds (text, tags, people, a small form).
LineOne's linear progress bar, solid or soft, in every size, with the active shimmer or the indeterminate slide.
LineOne's radios, in a group that shares one name: basic or outline, plain or filled box,
circle or squircle, in every theme color.
LineOne's range slider: a rounded track with a round thumb in the theme color, in three sizes.
A box that scrolls with LineOne's thin scrollbar (scrollbar-sm): 6px, no arrows, a transparent
track and a thumb that shows when the pointer or the focus is inside. For long menus, lists in
a card, the body of a panel.
LineOne's selects: the styled native <select> of the Select page and the searchable
listbox of the Tom Select page, with chips, groups, a clear button and created options.
The options of a select, in every shape the components accept, read into one shape.
LineOne's skeleton: placeholder blocks shown while the content loads, with a light wave passing over them or a pulse.
LineOne's spinners: the border ring (plain or soft), the growing dot and the SVG ring, with the linear or the elastic timing.
LineOne's steps: numbered or plain points joined by a line, horizontal or vertical.
LineOne's switches: solid or outline (plain or filled track), pill or squircle, three sizes, four thumb sizes, in every theme color.
LineOne's tables: basic, bordered, hoverable, zebra and the grid look, with :col slots
the way Phoenix's generated CoreComponents.table/1 takes them.
LineOne's tabs: underlined (line), on a gray track (boxed), rounded (pill) and plain text (text), laid out
horizontally or vertically, with or without icons.
LineOne's tags: clickable badges that represent an attribute, a filter or an action.
LineOne's tag input (the Tom Select page's Input Tags demos): what is typed becomes a chip on Enter, Tab or the delimiter, chips are removed with Backspace or their remove button.
LineOne's rich text editor (Quill's snow toolbar in LineOne's skin) on a plain
contenteditable: bold, italic, underline, strike, quote, code, headings, lists,
sub/superscript, indent, text direction, size, font, colors, alignment, links and clean.
LineOne's textareas: outlined or filled, fixed or resizable, and framed with a header or a footer (a title input, a toolbar, a submit button).
LineOne's time picker (flatpickr with no calendar): an input with a clock icon that opens flatpickr's hour and minute row, on a 12-hour clock with AM/PM or a 24-hour one, held inside a minimum and a maximum.
LineOne's timeline: events down a line, each marked by a filled, outlined or icon point.
LineOne's notifications: a small colored note at a corner or an edge of the screen that leaves by itself after a few seconds.
LineOne's tooltip (its tippy.js look and options): a hint around a trigger, in every theme color, on twelve placements, after a delay, on hover, click or focus, following the cursor, or holding HTML.
LineOne's tree view: a hierarchical list whose branches expand and collapse.
LineOne's typography: headings in every level and weight, display headings, gradient and decorated text, decorated links, inline code and keyboard keys.
LineOne's file uploads, built on LiveView uploads: the drop panel of its FilePond demos (bordered, filled, in a grid, or a round avatar drop) with each file's progress, errors and cancel button, and the styled "Choose File" buttons of its Input File demo.
The installed components as data: their modules, docs, attrs and slots.
The step of mix linea_ui.install that teaches Claude Code the components: it writes the
skill under .claude/skills/linea-ui/ and points AGENTS.md and CLAUDE.md at it.
The steps of mix linea_ui.install that edit the app's own assets: assets/css/app.css and
assets/js/app.js.
The edits mix linea_ui.install makes to the app's assets/css/app.css, as pure functions
from the file's contents to its new contents.
The step of mix linea_ui.install --hugeicons that draws the components' glyphs with
Hugeicons instead of LineOne's own: the hugeicons dependency (its SVGs
are vendored, not compiled) and config :linea_ui, :icons, :hugeicons. The Tailwind plugin
that turns huge-* classes into masks is added to app.css by LineaUI.Installer.Assets.css/2.
The edit mix linea_ui.install makes to the app's assets/js/app.js, as a pure function from
the file's contents to its new contents.
The steps of mix linea_ui.install that edit the Phoenix app's Elixir code: the endpoint,
which serves LineaUI's fonts, and the web module, which imports the components.
Builds the Claude Code skill that teaches an agent to write LineaUI markup.
Mix Tasks
Writes .claude/skills/linea-ui/: a short SKILL.md index and one reference per component,
generated from the components' attrs, slots and docs.
Sets LineaUI up in a Phoenix app. The one command that adds the dependency and runs this is