preline

🥇Gold

Preline UI provides prebuilt, customizable components for web applications. Developers use it to rapidly build interfaces with Tailwind CSS. It connects to HTML, JavaScript, and TypeScript workflows.

6,2874020Updated 2d ago

Intermediate30min to implementautomation

Saves ~15 min per use

Quick InstallView Source

git clone https://github.com/htmlstreamofficial/preline.git

Works with:

Claude

Overview

About This Skill

https://preline.co/

How to Use

1. **Identify Requirements**: Determine the specific components and features you need for your navigation bar, such as the number of menu items and any special buttons. 2. **Customize the Prompt**: Replace the [NUMBER] and [FEATURE] placeholders in the prompt template with your specific requirements. 3. **Generate Code**: Paste the customized prompt into your AI tool (e.g., Claude or ChatGPT) and generate the HTML and JavaScript code. 4. **Review and Test**: Review the generated code for accuracy and test it in your development environment to ensure it meets your needs. 5. **Integrate and Customize**: Integrate the code into your project and make any necessary adjustments to match your design preferences and functionality requirements.

Use Cases

Quickly set up a responsive navigation bar for a web application using Preline UI components.

Easily implement modals and dropdowns in your project to enhance user interactivity.

Customize and extend prebuilt UI components to fit the specific design needs of your application.

Integrate Preline UI with existing Tailwind CSS projects to streamline the development process.

Setup & Installation

Quick Install

No install command available. Check the GitHub repository for manual installation instructions.

Alternative Install (Git Clone)

git clone https://github.com/htmlstreamofficial/preline

Requirements

Claude Code or compatible AI agent
Works with: Claude

Quick Start Guide

Install the Skill

Copy the install command above and run it in your terminal.

Open Your AI Agent

Launch Claude Code, Cursor, or your preferred AI coding agent.

Try It Out

Use the prompt template or examples below to test the skill.

Customize

Adapt the skill to your specific use case and workflow.

Usage Examples

Prompt Template

Generate a responsive navigation bar using Preline UI components. The navigation should include a logo, [NUMBER] menu items, and a [FEATURE] button. Ensure the design is mobile-friendly and includes a dropdown menu for the 'Products' section. Provide the complete HTML and JavaScript code.

Example Output

Here's a responsive navigation bar built with Preline UI components:

HTML:
```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Navigation</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/preline@1.4.0/dist/preline.min.js" rel="stylesheet">
</head>
<body>
    <nav class="bg-white shadow-lg">
        <div class="max-w-6xl mx-auto px-4">
            <div class="flex justify-between">
                <div class="flex space-x-7">
                    <div>
                        <a href="#" class="flex items-center py-4 px-2">
                            <svg class="h-8 w-8 mr-2 text-blue-500" viewBox="0 0 512 512" fill="currentColor">
                                <path d="M384 0c26.5 0 48 21.5 48 48v48h-80v-48c0-26.5-21.5-48-48-48H192C165.5 0 144 21.5 144 48v48H64V48C64 21.5 42.5 0 16 0H0v416c0 26.5 21.5 48 48 48h48v-80h80v80h80c26.5 0 48-21.5 48-48V192h80c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48H384z"></path>
                            </svg>
                            <span class="font-semibold text-gray-500 text-lg">MyApp</span>
                        </a>
                    </div>
                    <div class="hidden md:flex items-center space-x-1">
                        <a href="#" class="py-4 px-2 text-green-500 border-b-4 border-green-500 font-semibold">Home</a>
                        <a href="#" class="py-4 px-2 text-gray-500 font-semibold hover:text-green-500 transition duration-300">About</a>
                        <a href="#" class="py-4 px-2 text-gray-500 font-semibold hover:text-green-500 transition duration-300">Services</a>
                        <div class="hs-dropdown relative inline-flex">
                            <button id="hs-dropdown-custom-hover" class="py-4 px-2 text-gray-500 font-semibold hover:text-green-500 transition duration-300">
                                Products
                                <svg class="hs-dropdown-open:rotate-180 w-4 h-4 ml-2" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M2 5L8.16086 10.6869C8.35239 10.8637 8.64761 10.8637 8.83914 10.6869L15 5" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
                                    <path d="M2 11L8 6L14 11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                </svg>
                            </button>
                            <div class="hs-dropdown-menu transition-all duration-300 origin-top-right hidden min-w-[160px] absolute left-0 top-full z-10 w-48">
                                <a class="flex items-center gap-x-3.5 py-2 px-3.5 bg-white dark:bg-gray-800 text-sm text-gray-700 dark:text-white rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-400" href="#">
                                    Product 1
                                </a>
                                <a class="flex items-center gap-x-3.5 py-2 px-3.5 bg-white dark:bg-gray-800 text-sm text-gray-700 dark:text-white rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-400" href="#">
                                    Product 2
                                </a>
                                <a class="flex items-center gap-x-3.5 py-2 px-3.5 bg-white dark:bg-gray-800 text-sm text-gray-700 dark:text-white rounded-md hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-400" href="#">
                                    Product 3
                                </a>
                            </div>
                        </div>
                        <a href="#" class="py-4 px-2 text-gray-500 font-semibold hover:text-green-500 transition duration-300">Contact</a>
                    </div>
                </div>
                <div class="hidden md:flex items-center space-x-3">
                    <a href="#" class="py-2 px-2 font-medium text-white bg-green-500 rounded hover:bg-green-400 transition duration-300">Sign In</a>
                    <a href="#" class="py-2 px-2 font-medium text-green-500 bg-transparent border border-green-500 rounded hover:bg-green-500 hover:text-white transition duration-300">Sign Up</a>
                </div>
                <div class="md:hidden flex items-center">
                    <button class="outline-none mobile-menu-button">
                        <svg class="w-6 h-6 text-gray-500 hover:text-green-500" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
                            <path d="M4 6h16M4 12h16M4 18h16"></path>
                        </svg>
                    </button>
                </div>
            </div>
        </div>
        <div class="hidden mobile-menu hidden w-full md:hidden">
            <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
                <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-green-500 bg-gray-50 hover:bg-gray-100">Home</a>
                <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-green-500 hover:bg-gray-50">About</a>
                <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-green-500 hover:bg-gray-50">Services</a>
                <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-green-500 hover:bg-gray-50">Products</a>
                <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-green-500 hover:bg-gray-50">Contact</a>
            </div>
            <div class="pt-4 pb-3 border-t border-gray-200">
                <div class="flex items-center px-5">
                    <a href="#" class="w-full flex-1 inline-flex items-center justify-center px-4 py-2 border border-transparent rounded-md shadow-sm text-base font-medium text-white bg-green-500 hover:bg-green-400">Sign In</a>
                    <a href="#" class="w-full flex-1 inline-flex items-center justify-center px-4 py-2 border border border-green-500 rounded-md shadow-sm text-base font-medium text-green-500 bg-white hover:bg-green-500 hover:text-white">Sign Up</a>
                </div>
            </div>
        </div>
    </nav>
    <script src="https://cdn.jsdelivr.net/npm/preline@1.4.0/dist/preline.min.js"></script>
    <script>
        const btn = document.querySelector("button.mobile-menu-button");
        const menu = document.querySelector(".mobile-menu");
        btn.addEventListener("click", () => {
            menu.classList.toggle("hidden");
        });
    </script>
</body>
</html>
```

This code creates a responsive navigation bar with a logo, five menu items (including a dropdown for 'Products'), and two buttons ('Sign In' and 'Sign Up'). The design is mobile-friendly and includes a hamburger menu for smaller screens.