Getting set up

Templates & Components

License Details

To get started with templates all you need to do is clone the Template code. All templates will come with the original figma files and Tailwind Config for easy style setup!

All templates also come with components in the same style. You'll be able to use these components to build upon the template project to create a truly unique website.

Style guide of the template

When you clone a template, it comes with the Tailwind Config - this config includes things like the font styles. When you copy and paste a Component in that style into the template, the style of that project will automatically apply.

Animations of the template

In the templates, the AOS (Animate On Scroll) is used to create animations. It is a simple library for adding animations to elements as they scroll into view.

Animation Options:

fade, fade-up, fade-down, slide-up, zoom-in, etc. You can customize the duration, delay, and other settings through data-aos-* attributes.

Advanced Configuration:

AOS allows you to customize animations with various settings during initialization, such as duration, delay, offset, and more.

For more detailed information, visit the AOS official documentation .

Functionality of the template

For the functionality of the templates, the Alpine.js library was used. It will be installed during the installation of other packages in the project using the npm install command. Alpine.js is a lightweight JavaScript library for adding interactive features.

x-show="menuOne": This attribute controls the visibility of an element. If the menuOne variable is true, the element is displayed; otherwise, it is hidden. This is useful for toggling dropdown menus or showing and hiding various UI components based on state.

x-on:click.outside="menuOne = false": This attribute adds an event handler for clicks outside the element. When a user clicks outside the element, menuOne is set to false. This is commonly used to automatically close dropdown menus or modal windows when clicking outside their boundaries.

x-transition: These attributes manage the transition animation of the element. They are divided into entering (enter) and leaving (leave) animations, each with start and end stages. This allows for smooth animation effects for elements appearing and disappearing.

x-bind:class="menuOne ? 'text-gray-800 lg:' : '' ": : This attribute dynamically binds classes to the element based on a condition. If menuOne is true, the text-gray-800 lg: class is applied; otherwise, no classes are applied. This allows for dynamic styling of the element based on the application's state.

For more detailed information, visit the Alpine.js official documentation .

New Templates Every Week

Be the first to get notified of new Templates & Components. Quality pixels and no spam, ever.