https://github.com/eace/components

Simple and accessible UI components built with Tailwind and Alpine.js
https://github.com/eace/components

Last synced: about 1 month ago
JSON representation

Simple and accessible UI components built with Tailwind and Alpine.js

• Host: GitHub
• URL: https://github.com/eace/components
• Owner: eaCe
• Created: 2024-01-05T11:24:26.000Z (almost 1 year ago)
• Default Branch: main
• Last Pushed: 2024-02-10T05:39:32.000Z (11 months ago)
• Last Synced: 2024-02-10T06:34:37.040Z (11 months ago)
• Language: HTML
• Homepage: https://codepen.io/eace/pen/mdoOvjr
• Size: 42 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Tailwind and Alpine.js Components

This project contains several UI components built with Tailwind CSS and Alpine.js.

The aim of this project is to provide a set of accessible UI components that can be used in any project.

You can view a demo of the components in the `examples.html` file or on codepen.io

at https://codepen.io/eace/pen/mdoOvjr.

The components are:

## Accordion

A simple accordion component. Further information can be found in

the [ARIA Accordion Example](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/examples/accordion/). It uses Alpine's

Collapse plugin to handle the accordion functionality.

## Dropdown

A simple dropdown component. Further information can be found in

the [ARIA Menu Button Example](https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/).

## Switch

A simple switch button component.

## Modal

A simple modal component. Further information can be found in

the [ARIA Dialog Modal Example](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/dialog/). It uses

Alpine's Focus plugin to trap focus within the modal.

## Spinbutton

A simple spinbutton component. Further information can be found in the

[ARIA Spinbutton Example](https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/).

## Tabs

A simple tabs component. Further information can be found in the

[ARIA Tabs Example](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/).

## Offcanvas

A simple offcanvas component. It uses Alpine's Focus plugin to trap focus within the offcanvas element.

## Spinner

A simple spinner component.

## Dialog

A native dialog component. It uses the native HTML dialog element and the `showModal` and `close` methods to show and

hide the dialog.

## Details

A native details component. It uses the native HTML details and summary elements to create a simple collapsible section.

## Usage

To use these components, simply include the HTML code in your project and ensure you have Tailwind CSS and Alpine.js

included in your project. Some components may require additional Alpine.js plugins, such as the Focus plugin for the

Modal component.

## Dependencies

- [Tailwind CSS](https://tailwindcss.com/)

- [Alpine.js](https://alpinejs.dev/)