# Preline UI Components and Templates
Preline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework. It provides a comprehensive collection of components and templates to help developers quickly build responsive websites.
## Key Features
- Built on Tailwind CSS utility classes
- Includes over 300 component examples
- Supports both light and dark modes
- Compatible with HTML, React and Vue
- Free and open source
## Available Components
### Basic UI Elements
- Buttons (13 variants)
- Dropdowns
- Navigation bars
- Modals
- Alerts (8 variants)
- Avatars (10 variants)
- Badges (9 variants)
- Cards (21 variants)
### Form Components
- Authentication forms
- Feedback forms
- Subscribe forms
- Textarea inputs
### Layout Components
- Hero sections
- Pricing sections
- FAQ sections
- Team sections
- Testimonial sections
- Masonry layouts
- Card layouts
### Application Components
- Invoices
- Tables
- Stats
- Form layouts
- AI prompts
- Charts
## Starter Templates
Preline UI provides ready-to-use templates for common website sections:
### Marketing Pages
- Hero sections
- Pricing pages
- Blog layouts
- Contact sections
- Footer layouts
### Application Pages
- Dashboards
- Admin panels
- Invoice templates
- Data tables
- Stats widgets
## Getting Started
1. Install via npm:
```bash
npm i preline
```
2. Add to tailwind.config.js:
```js
module.exports = {
content: [
'node_modules/preline/dist/*.js'
],
plugins: [
require('preline/plugin')
]
}
```
3. Include the JS file:
```html
```
For full documentation and examples, visit [preline.co](https://preline.co/)