PrebuiltUI

https://prebuiltui.com/docs
Admin
PrebuiltUI is a collection of ready-to-use, fully customizable UI components and templates built...
Tokens:1,605
Snippets:7
Trust Score:4
Update:1 year ago
Show doc for...
Tokens:
Raw
### Getting Started with PrebuiltUI via CDN

Source: https://prebuiltui.com/docs/cdn

This snippet shows how to quickly integrate PrebuiltUI into your HTML project using the Play CDN. It includes the necessary script tag in the head and a basic card component in the body, styled with Tailwind CSS utility classes.

```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body>
<div class="card bg-white p-6 shadow-lg rounded-lg">
  <h3 class="text-xl font-bold">Card Title</h3>
  <p>Card content goes here.</p>
</div>
</body>
</html>
```

--------------------------------

### Framework Integration Guides

Source: https://prebuiltui.com/docs/framework

Guides for integrating PrebuiltUI components with various popular web development frameworks. Each guide provides specific instructions for setting up and using the components within the respective framework's ecosystem.

```APIDOC
Framework Integration:
  Vite + React: https://prebuiltui.com/docs
  Next.js: https://tailwindcss.com/docs/installation/framework-guides/nextjs
  Laravel: https://tailwindcss.com/docs/installation/framework-guides/laravel/vite
  Nuxt.js: https://tailwindcss.com/docs/installation/framework-guides/nuxt
  SolidJS: https://tailwindcss.com/docs/installation/framework-guides/solidjs
  SvelteKit: https://tailwindcss.com/docs/installation/framework-guides/sveltekit
  Angular: https://tailwindcss.com/docs/installation/framework-guides/angular
  Ruby on Rails: https://tailwindcss.com/docs/installation/framework-guides/ruby-on-rails
  React Router: https://tailwindcss.com/docs/installation/framework-guides/react-router
  Phoenix: https://tailwindcss.com/docs/installation/framework-guides/phoenix
  Parcel: https://tailwindcss.com/docs/installation/framework-guides/parcel

Description:
  Provides links to documentation for integrating PrebuiltUI with various frontend and backend frameworks. Each link directs to specific setup and usage instructions tailored to the framework.
```

--------------------------------

### Install Tailwind CSS

Source: https://prebuiltui.com/docs/index

Installs Tailwind CSS and the Tailwind CSS Vite plugin using npm. This is the first step to setting up Tailwind CSS in your Vite project.

```bash
npm install tailwindcss @tailwindcss/vite
```

--------------------------------

### Simple Card Component

Source: https://prebuiltui.com/docs/index

A basic example of a card component using Tailwind CSS classes for styling. It includes a title and content area.

```html
<divclass="card bg-white p-6 shadow-lg rounded-lg">
 <h3class="text-xl font-bold">Card Title</h3>
 <p>Card content goes here.</p>
</div>
```

--------------------------------

### Customizing PrebuiltUI Components

Source: https://prebuiltui.com/docs/cdn

Demonstrates how to customize PrebuiltUI components by directly modifying Tailwind CSS utility classes in the HTML. This example shows changing the background color and rounding of a div.

```html
<div class="bg-blue-500 p-6 rounded-lg">
</div>
```

--------------------------------

### Import Tailwind CSS

Source: https://prebuiltui.com/docs/index

Imports Tailwind CSS into your project's main CSS file. This makes all Tailwind utility classes available.

```css
@import "tailwindcss";
```

--------------------------------

### Configure Vite Plugin

Source: https://prebuiltui.com/docs/index

Configures the Vite build process to include the Tailwind CSS plugin. This allows Vite to process Tailwind CSS directives.

```javascript
import{
 defineconfig
}from'vite'
import
tailwindcssfrom'@tailwindcss/vite'

exportdefaultdefineconfig({
 plugins:[
 tailwindcss(),
 ],
})
```
Tokens:
Raw