Eddie provides a comprehensive library of web components organized by atomic design principles. Every component is a native custom element with the ed- prefix.

Component APIs, properties, slots, and interactive examples are documented via Storybook Autodocs — generated directly from the source code. Browse all components in Storybook →

Atoms

The foundational building blocks.

Forms

• Field Note — <ed-field-note>
• Tag — <ed-tag>

Icons

• Icon — <ed-icon>
• Loading Indicator — <ed-loading-indicator>

Text

• Heading — <ed-heading>
• Hr — <ed-hr>
• Text Link — <ed-text-link>

Molecules

Combinations of atoms that form distinct UI patterns.

Blocks

• Box — <ed-box>
• Card — <ed-card>
• Feature — <ed-feature>
• Hero — <ed-hero>
• Media Block — <ed-media-block>
• Skeleton — <ed-skeleton>

Buttons

• Button — <ed-button>
• Tag List — <ed-tag-list>

Category

• Tooltip — <ed-tooltip>
• Tooltip Trigger — <ed-tooltip-trigger>

Forms

• Checkbox Field — <ed-checkbox-field>
• Counter — <ed-counter>
• File Upload — <ed-file-upload>
• Inline Checkbox — <ed-inline-checkbox>
• Radio Field — <ed-radio-field>
• Select Field — <ed-select-field>
• Text Field — <ed-text-field>
• Textarea Field — <ed-textarea-field>
• Toggle — <ed-toggle>

Global

• Logo — <ed-logo>

Interactive

• Show Hide — <ed-show-hide>
• Show More — <ed-show-more>

Layout & Containers

• Band — <ed-band>
• Grid — <ed-grid>
• Layout — <ed-layout>
• Layout Container — <ed-layout-container>
• Linelength Container — <ed-linelength-container>
• Main — <ed-main>
• Nav Container — <ed-nav-container>

Lists

• List — <ed-list>

Messaging

• Alert — <ed-alert>
• Badge — <ed-badge>
• Toast — <ed-toast>

Navigation

• Breadcrumbs — <ed-breadcrumbs>
• Global Nav — <ed-global-nav>
• Icon Link List — <ed-icon-link-list>
• Link List — <ed-link-list>
• Pagination — <ed-pagination>
• Primary Nav — <ed-primary-nav>
• Utility Nav — <ed-utility-nav>

Tables

• Key Value Table — <ed-key-value-table>

Text

• Page Header — <ed-page-header>

Toolbars

• Toolbar — <ed-toolbar>

Organisms

Complex, standalone UI sections.

Button

• Button Group — <ed-button-group>

Forms

• Search Form — <ed-search-form>

Global

• Footer — <ed-footer>
• Header — <ed-header>

Interactive

• Accordion — <ed-accordion>
• Drawer — <ed-drawer>
• Modal — <ed-modal>
• Tabs — <ed-tabs>

Layout & Containers

• Section — <ed-section>

Tables

• Table — <ed-table>
• Table Object — <ed-table-object>

Text

• Text Passage — <ed-text-passage>