CinderUI.Components.DataDisplay (cinder_ui v0.1.0)

heex title="FAQ accordion" align="full" <.accordion> <:item title="What is CinderUI?" open={true}> A Phoenix-first component library modeled after shadcn/ui patterns. </:item> <:item title="Does it require JavaScript?"> Core interactions use semantic HTML first, with optional hooks for enhancement. </:item> </.accordion>

heex title="Release notes" align="full" <.accordion> <:item title="v0.4.0 · New components" open={true}> Added pagination, tabs, and command palette docs pages. </:item> <:item title="v0.3.2 · Docs quality"> Added generated attr and slot tables plus HEEx copy snippets. </:item> <:item title="v0.3.0 · Static site"> Introduced static docs export and theme controls. </:item> </.accordion>

Screenshot

accordion/1 screenshot

View live examples and full component docs.

Attributes

class (:string) - Defaults to nil.
Global attributes are accepted.

Slots

item (required) - Accepts attributes:
- title (:string) (required)
- open (:boolean)

avatar(assigns)

Renders a circular avatar with optional image and fallback.

Examples

heex title="Image with fallback" <.avatar src="example.png" alt="Levi" fallback="LV" />

heex title="Fallback initials only" <.avatar alt="Mira Chen" />

heex title="Sizes" <div class="flex items-center gap-3"> <.avatar size={:sm} alt="Small User" /> <.avatar alt="Default User" /> <.avatar size={:lg} alt="Large User" /> </div>

heex title="Badge" <.avatar src="example.png" alt="Online User"> <:badge class="bg-green-600 dark:bg-green-800"><span class="sr-only">Online</span></:badge> </.avatar>

heex title="Badge with icon" <.avatar class="grayscale" src="example.png" alt="Add User"> <:badge><.icon name="plus" class="size-2" /></:badge> </.avatar>

heex title="Dropdown" <.dropdown_menu id="avatar-dropdown"> <:trigger> <.avatar src="example.png" alt="Levi" /> </:trigger> <:item>Profile</:item> <:item>Billing</:item> <:item>Settings</:item> <:item>Log out</:item> </.dropdown_menu>

Screenshot

View live examples and full component docs.

Attributes

src (:string) - Defaults to nil.
alt (:string) - Defaults to "".
fallback (:string) - Defaults to nil.
size (:atom) - Defaults to :default. Must be one of :sm, :default, or :lg.
class (:string) - Defaults to nil.
Global attributes are accepted.

Slots

badge - Accepts attributes:
- class (:string)

avatar_group(assigns)

Groups avatars with overlap.

Examples

heex title="Team avatars" <.avatar_group> <.avatar src="example.png" alt="Levi" /> <.avatar src="example.png" alt="Mira" /> <.avatar src="example.png" alt="Shadcn" /> <.avatar_group_count>+2</.avatar_group_count> </.avatar_group>

heex title="Fallback-only group" <.avatar_group> <.avatar alt="Levi Buzolic" /> <.avatar alt="Mira Jones" /> <.avatar alt="Sam Patel" /> </.avatar_group>

Screenshot

avatar_group/1 screenshot

View live examples and full component docs.

Attributes

class (:string) - Defaults to nil.
Global attributes are accepted.

Slots

inner_block (required)

avatar_group_count(assigns)

Counter item for avatar groups (e.g. +3).

Example

heex title="Avatar overflow count" <.avatar_group> <.avatar alt="Levi Buzolic" /> <.avatar alt="Mira Jones" /> <.avatar_group_count size={:sm}>+3</.avatar_group_count> </.avatar_group>

## Screenshot

avatar_group_count/1 screenshot

View live examples and full component docs.

## Attributes

size (:atom) - Defaults to :default. Must be one of :sm, :default, or :lg. class (:string) - Defaults to nil. * Global attributes are accepted. ## Slots

* inner_block (required)

code_block(assigns)

Monospaced code block wrapper.

Example

heex title="Code block" align="full" <.code_block> mix cinder_ui.docs.build </.code_block>

## Screenshot

code_block/1 screenshot

View live examples and full component docs.

## Attributes

id (:string) - Defaults to nil. class (:string) - Defaults to nil. * Global attributes are accepted. ## Slots

* inner_block (required)

collapsible(assigns)

Generic collapsible section with trigger/content slots.

Uses <details> for accessibility and no-JS behavior.

Example

heex title="Collapsible details" align="full" <.collapsible open={true}> <:trigger> Release notes </:trigger> Added generated attr tables and improved examples. </.collapsible>

## Screenshot

collapsible/1 screenshot

View live examples and full component docs.

## Attributes

open (:boolean) - Defaults to false. class (:string) - Defaults to nil. * Global attributes are accepted. ## Slots

trigger (required) inner_block (required)

table(assigns)

Table wrapper with overflow container.

Examples

heex title="Service status table" align="full" <.table> <.table_caption>Active deployments across environments.</.table_caption> <.table_header> <.table_row> <.table_head>Service</.table_head> <.table_head>Status</.table_head> <.table_head class="text-right">Latency</.table_head> </.table_row> </.table_header> <.table_body> <.table_row> <.table_cell>API</.table_cell> <.table_cell>Healthy</.table_cell> <.table_cell class="text-right">82ms</.table_cell> </.table_row> <.table_row> <.table_cell>Worker</.table_cell> <.table_cell>Degraded</.table_cell> <.table_cell class="text-right">164ms</.table_cell> </.table_row> </.table_body> </.table>