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.
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.
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.
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.
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.
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.
Run once after adding {:linea_ui, ...} to mix.exs, and again after each upgrade