Astro Components is a collection of all the reusable components I coded over the years for my Astro landing sites using Tailwind CSS and shadcn/ui components.
Table of Contents
Astro Components are ready to copy and paste into your Astro project. You can use them as they are or customize them to your needs.
⚠️ Some components need installation of dependencies, so make sure to read the component's README file before using it.
Astro Components is structured in a way that you can easily copy and paste the components you need into your Astro project.
Each component lives under it's own folder in this repository so that you can easily find the component you need.
This means that if you want a navbar, you can just go to the navbar folder and copy the Navbar.astro wherever you want in your Astro project.
You can copy and paste the component you want and it will work out of the box, but you can also customize it to your needs two ways:
-
Using Props: You can pass props to the component to customize it. For example, you can pass a
titleprop to theHeader.astrocomponent to change the title of the header. -
Modifying the component directly: You can also modify the component directly as you see fit and not use props. You can change the sample data or text in the component to your own.
All the components use Tailwind CSS: You can also customize the components using Tailwind CSS. You can change the colors, sizes, and more by changing the classes in the component.
- Why?
If you have any idea, suggestions or find any bugs, feel free to open a discussion, an issue or create a pull request. That would be very useful for all of us and we would be happy to listen and take action.
Astro Components is licensed under the MIT license — see the LICENSE file for details.