General - Phoenix & LiveView Components

General holds the building blocks that are not tied to one kind of screen: buttons, badges, avatars, cards, chat bubbles, lists and tables, tabs, accordions and collapsible sections, progress bars, spinners and skeleton placeholders for content that is loading, steppers and timelines, typography and layout helpers, and smaller pieces such as a keyboard key, a divider, a rating, a copy-to-clipboard button and a device mockup.

Each is generated into your Phoenix project on its own, so you add only the components you use. Their pages below show examples and list the attributes, slots and generator options each one takes.

Accordion ComponentStatelessJS-moduleJS Phoenix LiveView accordion with item slots (title, description, icon, image), 10 variants, multiple open panels, chevron props and server events.
Avatar ComponentStateless Avatars for Phoenix LiveView showing an image, initials or a fallback icon, with size, border, rounded and shadow props, status indicators, and stacked groups.
Badge ComponentStatelessJS-module Badge for Phoenix LiveView with variants, icons, a dismiss button, indicator dot, pinging animation, circle shape, and positioning on top of other elements.
Blockquote ComponentStateless Blockquote for Phoenix LiveView with a caption slot, an optional icon, and variant, size, padding and border props for highlighting quotes or key content.
Button ComponentStateless Buttons for Phoenix LiveView in many variants and gradients, with icons, indicators, pinging, link buttons, button groups, input buttons and a loading slot.
Card ComponentStateless Phoenix LiveView card with card_title, card_media, card_content and card_footer parts, variant, color, border, rounded and padding props, and image overlays.
Chat ComponentStateless Chat bubbles for Phoenix LiveView made of chat_section parts, with avatars, status and metadata slots, variants, colors, sizes and left or right alignment.
Clipboard ComponentStatelessJS Copy text to the clipboard from Phoenix LiveView: static text, dynamic values or an element by selector, with a reset timeout and success and error messages.
Collapse ComponentStatelessJS-moduleJS Unstyled collapse for Phoenix LiveView with trigger and content slots, an open prop, animation duration in milliseconds, and server events on open and close.
Device Mockup ComponentStateless Device mockups for Phoenix LiveView in iPhone, Android, watch, iPad, laptop and iMac frames, with color themes and image props or any HTML placed inside.
Divider ComponentStateless Divider for Phoenix LiveView, horizontal or vertical, with solid, dashed or dotted lines, text or icons on the line, size and color props, and an hr variant.
Indicator ComponentStateless Mark status or notifications on a parent element with a Phoenix LiveView indicator dot, with color, size, ping animation and position props.
Jumbotron ComponentStateless Phoenix LiveView jumbotron hero section with seven variants, border size and position, space, padding and font weight props, and a slot for any content.
Keyboard ComponentStateless Render shortcuts and key combinations as keycaps in Phoenix LiveView, with text or icon content, variants, and size, rounded and font weight props.
Layouts ComponentStateless Flex and Grid layout components for Phoenix LiveView that expose Tailwind utilities as props: direction, justify, align, gap, wrap, grid columns, rows and more.
List ComponentStateless List and list group for Phoenix LiveView, ordered or unordered, with variants, li, ul and ol parts, counts, icons, hoverable items, and nested lists.
Progress ComponentStatelessJS-moduleJS Progress indicators for Phoenix LiveView: horizontal and vertical bars, ring and semi-circle charts, gradients, and chunked sections with labels and tooltips.
Rating ComponentStatelessJS-module Star rating for Phoenix LiveView, interactive or read-only, with hover preview, count, precision, color and size props, and form binding through the field prop.
Skeleton ComponentStateless Placeholder blocks for content that is still loading in Phoenix LiveView, with color, width, height and rounded props and an animated pulse effect.
Speed Dial ComponentStatelessJS-module Speed dial for Phoenix LiveView, a floating button that opens quick actions, with link and icon item slots, animated icons, click mode, and placement options.
Spinner ComponentStateless Show loading states in Phoenix LiveView with spinners in default circle, dots, bars or pinging styles, plus color and size props for matching your theme.
Stepper ComponentStateless Stepper for Phoenix LiveView with horizontal or vertical layouts, current, completed and canceled step states, icons, descriptions, and clickable steps.
Table ComponentStateless Table for Phoenix LiveView with base, bordered, hoverable and separated variants, header and footer slots, row and column borders, and pagination pairing.
Table of Contents ComponentStatelessJS-module Table of contents for Phoenix LiveView that links to page sections with anchors and smooth scrolling, with nested items, active state, variants and animation.
Tabs ComponentStatelessJS-module Tabs for Phoenix LiveView, horizontal or vertical, with base, default and pills variants, scrollable lists, icons, badges and a server-driven active tab.
Timeline ComponentStateless Lay out events vertically or horizontally with the Phoenix LiveView timeline: bullet icons, titles, descriptions, times, images and line style props.
Typography ComponentStateless Headings h1 to h6, paragraphs and emphasis tags as Phoenix LiveView components, with color, size and font weight props for consistent text styling.