Free Astro Components

Welcome to the Free Astro Components repository! This library offers a collection of free, customizable components designed specifically for Astro.js.

About

This repository powers the documentation site available at free-astro-components.vercel.app, where you can find detailed usage examples, API references, and customization options for each component in this library.

You can explore the full repository on GitHub here.

Components

The library currently includes the following components:

  • Icons: A set of icons for various uses.
  • Buttons: Stylish and functional buttons for your web applications.
  • Controls
    • Checkbox: A checkbox component.
    • Radio: A radio button component.
    • Switch: A toggle switch component for user interactions.
  • Input: A versatile input component for user text entry.
  • Textarea: A textarea component for larger text input.
  • Select: A select dropdown component.
  • Tab: A tab component for organizing content into tabs.
    • TabItem: A subcomponent for individual tab items.
  • Modal: A modal component for displaying content in a dialog.
    • ModalHeader: The header section of the modal, usually containing a title and a close button.
    • ModalBody: The main content area of the modal.
    • ModalFooter: The footer section of the modal, typically containing action buttons.
  • Accordion
    • A component for creating collapsible content sections.
    • AccordionItem: A subcomponent for individual accordion items.

You can find the code for these components in the components directory of the GitHub repository.

Installation

To install the components in your Astro.js project, run:

npm install free-astro-components

Usage

Each component comes with its own documentation and usage examples, which you can find in the documentation site. Here is a basic example of how to use a component:

---
import { Button } from 'free-astro-components';
---

<Button label="Click me" />

Customization

Most components come with customizable CSS variables, making it easy to adapt the design to your project. For more details, refer to the Customize Colors section in the documentation.

Contributing

Contributions are welcome! If you have suggestions or find bugs, please open an issue or submit a pull request.

License

This project is licensed under the MIT License.

Thanks

If you find this project helpful and would like to support its development, consider buying me a coffee:

Buy Me A Coffee