This getting started guide assumes you already have TailwindCSS running on your project. If you don't, visit our TailwindCSS setup guide first.
Download the teakui-[version].zip file and extract it into a new directory.
You should now see a folder named teakui-release.
Inside you'll find a README.md file along with a [version]/components directory, like:
/teakui-release
1.0.0/components/
README.mdYou can browse the component files to find the component code you're looking for. These are organized into groups based on the type of component. To view previews of the components, just visit our TeakUI Components page.
As an example, let's open the components/accordions/accordion.html file in your text editor. You'll see something like the following code. Our example here has been simplified for the purpose of this documentation.
/components/accordions/accordion.html
<!-- BEGIN SCRIPT CODE HERE. PLACE IN HEAD SECTION OF YOUR CODE. -->
<!-- Alpine Collapse Plugin -->
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/[email protected]/dist/cdn.min.js"></script>
<!-- Main AlpineJS script. This is only needed for components that specify "Requires JS". -->
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
<!-- END SCRIPT CODE HERE -->
<!-- BEGIN COMPONENT CODE HERE -->
<!-- Accordion (Requires AlpineJS Collapse Plugin) -->
<div class="mx-auto">
<div class="border-b border-b-slate-300" x-data="accordion">
COMPONENT HTML CODE HERE
</div>
</div>
<style type="text/css">
[x-cloak] { display: none !important; }
</style>
<script>
document.addEventListener('alpine:init', () => {
Alpine.data('accordion', () => ({
SCRIPT CODE HERE
}))
})
</script>
<!-- /Accordion -->
<!-- END COMPONENT CODE HERE -->All components follow this basic format.
At the top of the file, you'll find any necessary JavaScript libraries that will need included. Here we have 2 AlpineJS files - the Collapse Plugin comes first and then the main AlpineJS library. These will both need included in this order, in the head of your html code.
<!-- Alpine Collapse Plugin -->
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/[email protected]/dist/cdn.min.js"></script>
<!-- Main AlpineJS script. This is only needed for components that specify "Requires JS". -->
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>Note: there are other methods of installing AlpineJS. View our AlpineJS guide for more details.
After the JavaScript code you'll find the component html code denoted by the <!--BEGIN COMPONENT CODE HERE--> comment. You'll want to copy and paste all of the code below that line into the <body> of your html.
<!-- BEGIN COMPONENT CODE HERE -->For some components, especially those that require AlpineJS, you may find a snippet of css in the component code. This is used to handle hiding certain components before AlpineJS is fully initialized on a page.
<style type="text/css">
[x-cloak] { display: none !important; }
</style>You'll want to be sure to include this css code once in your TailwindCSS custom code. You can also include this snipped directly in your html source if needed. See our TailwindCSS setup guide for more details.
Finally for any components that require AlpineJS, you'll find some code within script tags at the end of the component. This code handles the associated AlpineJS functionality for this component. You can either copy this code directly into your html after the component code or set it up in an external JS file. See our AlpineJS setup guide for more details.
<script>
document.addEventListener('alpine:init', () => {
Alpine.data('accordion', () => ({
SCRIPT CODE HERE
}))
})
</script>You're now ready to go with your new component! These components are made to be flexible and easy to modify, so feel free to make any changes you wish to fit your layout.
If you have questions, visit our support page to contact us for help.
Thank you for building with Hey Teak!
