Throughout this series, we'll be exploring AdonisJS's Edge component system in depth by building various components of our own.

What We’ll Be Using

AdonisJS is a backend-rendered template engine, meaning that when our AdonisJS server sends its response and our HTML hits the browser, EdgeJS has already done its job. Therefore, reactivity isn’t something it’s able to provide. To introduce reactivity, we can incorporate AlpineJS. Additionally, we'll utilize PinesUI and TailwindCSS to create our components.

PinesUI offers a range of elements with inherent reactivity through AlpineJS, while TailwindCSS handles styling. This combination enables us to adapt PinesUI elements for our AdonisJS Edge components with relative ease.

What We’ll Be Building

One of the first components we’ll be building is a button component. Our button component will evolve into a versatile option as we progress through its module in this series.

It will feature a core button structure, from which we can derive various sizes, color variants, an inverse style, and an outline style. Then, we’ll sprinkle in reactivity using AlpineJS to handle events like clicks that can propagate outside of our button component to an event handler.

In addition to our button, we’ll also incorporate components for:

• Accordion

• Alert

• Tabs

• Cards

• Date picker

• Inputs

• Modals

• Pagination

• Textareas

• And more

Before We Dive In

Before delving into component creation, we'll first provide a brief overview of components, including their definition, naming conventions, directory placement, and explanations of state, props, and slots. This foundational knowledge will ensure you're well-prepared and won't feel lost as we dive into the actual component development.