### Clone templUI Quickstart
Source: https://templui.io/docs/how-to-use
Start fast with the templUI quickstart project. This involves cloning the repository, cleaning up git history, setting up environment variables, and running the development server.
```bash
git clone https://github.com/templui/templui-quickstart.git myapp
rm -rf myapp/.git
cd myapp
cp .env.example .env
go mod tidy
task dev
```
--------------------------------
### Installation
Source: https://templui.io/docs/components/sidebar
Instructions on how to install and import the Sidebar component into your project.
```APIDOC
## Installation
CLI Import
```
templui add sidebar
```
Load the script once in your layout:
```html
@sidebar.Script()
```
```go
import "github.com/templui/templui/components/sidebar"
```
```
--------------------------------
### Tooltip Installation
Source: https://templui.io/docs/components/tooltip
Instructions on how to install and load the Tooltip component script.
```APIDOC
CLI Import
```
templui add tooltip
```
Load the script once in your layout:
```html
@tooltip.Script()
```
Import statement:
```go
import "github.com/templui/templui/components/tooltip"
```
```
--------------------------------
### Install Task Runner
Source: https://templui.io/docs/how-to-use
Install the Task runner, a task automation tool, using Go's install command. This is useful for managing development workflows.
```bash
go install github.com/go-task/task/v3/cmd/task@latest
```
--------------------------------
### Install templ CLI
Source: https://templui.io/docs/how-to-use
Install the templ CLI tool, which is used for templating, using Go's install command. Ensure you have Go installed and configured.
```bash
go install github.com/a-h/templ/cmd/templ@latest
```
--------------------------------
### Installation
Source: https://templui.io/docs/components/collapsible
Instructions for installing the Collapsible component and loading its script.
```APIDOC
## Installation
### CLI Import
```bash
templui add collapsible
```
### Script Loading
Load the script once in your layout:
```html
@collapsible.Script()
```
### Go Import
```go
import "github.com/templui/templui/components/collapsible"
```
```
--------------------------------
### Installation
Source: https://templui.io/docs/components/sheet
Instructions for installing and setting up the Sheet component.
```APIDOC
## Installation
### CLI Import
```bash
templui add sheet
```
### Script Load
Load the script once in your layout:
```html
@sheet.Script()
```
### Go Import
```go
import "github.com/templui/templui/components/sheet"
```
Load the script once in your layout:
```html
@sheet.Script()
```
```
--------------------------------
### Check Go Installation
Source: https://templui.io/docs/how-to-use
Verify if Go is installed on your system by checking its version.
```bash
go version # Check if installed
```
--------------------------------
### Avatar Installation
Source: https://templui.io/docs/components/avatar
Instructions on how to install and load the Avatar component's script.
```APIDOC
## Installation
CLI Import
```
templui add avatar
```
Load the script once in your layout:
```html
@avatar.Script()
```
Import statement:
```go
import "github.com/templui/templui/components/avatar"
```
```
--------------------------------
### Pagination With Helper Example
Source: https://templui.io/docs/components/pagination?page=2
An example demonstrating how to use the `CreatePagination` helper function to dynamically generate pagination links.
```APIDOC
## Pagination With Helper
### Description
This example utilizes the `CreatePagination` helper to manage pagination logic, making it easier to handle dynamic page numbers, active states, and previous/next button visibility.
### Code
```go
package showcase
import (
"fmt"
"github.com/templui/templui/components/pagination"
)
templ PaginationWithHelper() {
{{ p := pagination.CreatePagination(5, 20, 3) }}
@pagination.Pagination() {
@pagination.Content() {
@pagination.Item() {
@pagination.Previous(pagination.PreviousProps{
Href: fmt.Sprintf("?page=%d", p.CurrentPage-1),
Disabled: !p.HasPrevious,
Label: "Previous",
})
}
// First page with ellipsis if needed
if p.Pages[0] > 1 {
@pagination.Item() {
@pagination.Link(pagination.LinkProps{
Href: "?page=1",
}) {
1
}
}
if p.Pages[0] > 2 {
@pagination.Item() {
@pagination.Ellipsis()
}
}
}
// Visible pages
for _, page := range p.Pages {
@pagination.Item() {
@pagination.Link(pagination.LinkProps{
Href: fmt.Sprintf("?page=%d", page),
IsActive: page == p.CurrentPage,
}) {
{ fmt.Sprint(page) }
}
}
}
// Last page with ellipsis if needed
if p.Pages[len(p.Pages)-1] < p.TotalPages {
if p.Pages[len(p.Pages)-1] < p.TotalPages-1 {
@pagination.Item() {
@pagination.Ellipsis()
}
}
@pagination.Item() {
@pagination.Link(pagination.LinkProps{
Href: fmt.Sprintf("?page=%d", p.TotalPages),
}) {
{ fmt.Sprint(p.TotalPages) }
}
}
}
@pagination.Item() {
@pagination.Next(pagination.NextProps{
Href: fmt.Sprintf("?page=%d", p.CurrentPage+1),
Disabled: !p.HasNext,
Label: "Next",
})
}
}
}
}
```
```
--------------------------------
### Pagination with Helper Example
Source: https://templui.io/docs/components/pagination?page=4
An example demonstrating how to use the `pagination.CreatePagination` helper function to dynamically generate pagination links.
```APIDOC
## Pagination with Helper
### Description
This example utilizes the `pagination.CreatePagination` helper function to dynamically generate pagination links based on total pages, current page, and visible page count. It simplifies the process of creating complex pagination UIs.
### Code
```go
package showcase
import (
"fmt"
"github.com/templui/templui/components/pagination"
)
templ PaginationWithHelper() {
{{ p := pagination.CreatePagination(5, 20, 3) }}
@pagination.Pagination() {
@pagination.Content() {
@pagination.Item() {
@pagination.Previous(pagination.PreviousProps{
Href: fmt.Sprintf("?page=%d", p.CurrentPage-1),
Disabled: !p.HasPrevious,
Label: "Previous",
})
}
// First page with ellipsis if needed
if p.Pages[0] > 1 {
@pagination.Item() {
@pagination.Link(pagination.LinkProps{
Href: "?page=1",
}) {
1
}
}
if p.Pages[0] > 2 {
@pagination.Item() {
@pagination.Ellipsis()
}
}
}
// Visible pages
for _, page := range p.Pages {
@pagination.Item() {
@pagination.Link(pagination.LinkProps{
Href: fmt.Sprintf("?page=%d", page),
IsActive: page == p.CurrentPage,
}) {
{ fmt.Sprint(page) }
}
}
}
// Last page with ellipsis if needed
if p.Pages[len(p.Pages)-1] < p.TotalPages {
if p.Pages[len(p.Pages)-1] < p.TotalPages-1 {
@pagination.Item() {
@pagination.Ellipsis()
}
}
@pagination.Item() {
@pagination.Link(pagination.LinkProps{
Href: fmt.Sprintf("?page=%d", p.TotalPages),
}) {
{ fmt.Sprint(p.TotalPages) }
}
}
}
@pagination.Item() {
@pagination.Next(pagination.NextProps{
Href: fmt.Sprintf("?page=%d", p.CurrentPage+1),
Disabled: !p.HasNext,
Label: "Next",
})
}
}
}
}
```
```
--------------------------------
### Create a Chart Component
Source: https://templui.io/docs/components/charts
Example of creating a chart component with data and labels for mobile and desktop.
```go
package main
import "templ_ui/components/charts"
func main() {
charts.Chart(charts.ChartProps{
Title: "Traffic Sources",
Series: []charts.Series{
{
Data: []float64{15, 9, 3, 12, 7, 8},
Label: "Mobile",
},
{
Data: []float64{7, 16, 5, 20, 14, 15},
Label: "Desktop",
},
},
})
}
```
--------------------------------
### Default Pagination Example
Source: https://templui.io/docs/components/pagination?page=6
A basic example of how to implement the default pagination component.
```APIDOC
## Default Pagination
### Description
This example demonstrates the default usage of the Pagination component with previous, next, page links, and ellipsis.
### Component Structure
- `pagination.Pagination`
- `pagination.Content`
- `pagination.Item`
- `pagination.Previous`
- `pagination.Link`
- `pagination.Ellipsis`
- `pagination.Next
### Usage Example
```html
@pagination.Pagination(pagination.Props{
Class: "mt-8",
})
{
@pagination.Content() {
@pagination.Item() {
@pagination.Previous(pagination.PreviousProps{
Href: "?page=1",
Disabled: false,
Label: "Previous",
})
}
@pagination.Item() {
@pagination.Link(pagination.LinkProps{
Href: "?page=1",
}) {
1
}
}
@pagination.Item() {
@pagination.Link(pagination.LinkProps{
Href: "?page=2",
IsActive: true,
}) {
2
}
}
@pagination.Item() {
@pagination.Link(pagination.LinkProps{
Href: "?page=3",
}) {
3
}
}
@pagination.Item() {
@pagination.Ellipsis()
}
@pagination.Item() {
@pagination.Next(pagination.NextProps{
Href: "?page=3",
Label: "Next",
})
}
}
}
```
```
--------------------------------
### Tooltip Default Example
Source: https://templui.io/docs/components/tooltip
A basic example demonstrating the default Tooltip component.
```APIDOC
## TooltipDefault
```go
package showcase
import (
"github.com/templui/templui/components/button"
"github.com/templui/templui/components/tooltip"
)
templ TooltipDefault() {
@tooltip.Tooltip() {
@tooltip.Trigger(tooltip.TriggerProps{}) {
@button.Button(button.Props{
Variant: button.VariantOutline,
}) {
Hover Me
}
}
@tooltip.Content(tooltip.ContentProps{
ID: "tooltip-default",
Position: tooltip.PositionTop,
HoverDelay: 500,
HoverOutDelay: 100,
}) {
Add to cart
}
}
}
```
```
--------------------------------
### Install Pagination Component
Source: https://templui.io/docs/components/pagination
Instructions for adding the pagination component to your project using the CLI.
```bash
templui add pagination
```
```go
import "github.com/templui/templui/components/pagination"
```
--------------------------------
### Progress Indicator Installation
Source: https://templui.io/docs/components/progress
Install the progress component using the CLI and load the script once in your layout.
```bash
templui add progress
```
```html
@progress.Script()
```
```go
import "github.com/templui/templui/components/progress"
```
```html
@progress.Script()
```
--------------------------------
### Pagination Default Example
Source: https://templui.io/docs/components/pagination?page=4
A basic example demonstrating the default usage of the Pagination component with manual item creation.
```APIDOC
## Pagination Default
### Description
This example shows how to use the `pagination.Pagination` component with its nested components like `pagination.Item`, `pagination.Previous`, `pagination.Link`, `pagination.Ellipsis`, and `pagination.Next` to create a default pagination UI.
### Code
```go
package showcase
import "github.com/templui/templui/components/pagination"
templ PaginationDefault() {
@pagination.Pagination(pagination.Props{
Class: "mt-8",
}) {
@pagination.Content() {
@pagination.Item() {
@pagination.Previous(pagination.PreviousProps{
Href: "?page=1",
Disabled: false,
Label: "Previous",
})
}
@pagination.Item() {
@pagination.Link(pagination.LinkProps{
Href: "?page=1",
}) {
1
}
}
@pagination.Item() {
@pagination.Link(pagination.LinkProps{
Href: "?page=2",
IsActive: true,
}) {
2
}
}
@pagination.Item() {
@pagination.Link(pagination.LinkProps{
Href: "?page=3",
}) {
3
}
}
@pagination.Item() {
@pagination.Ellipsis()
}
@pagination.Item() {
@pagination.Next(pagination.NextProps{
Href: "?page=3",
Label: "Next",
})
}
}
}
}
```
```
--------------------------------
### CLI Installation
Source: https://templui.io/docs/components/table
Command to add the table component to your project using the CLI.
```bash
templui add table
```
--------------------------------
### Pagination Default Example
Source: https://templui.io/docs/components/pagination?page=2
A basic example demonstrating the default structure and usage of the Pagination component.
```APIDOC
## Pagination Default
### Description
This example shows a standard pagination setup with previous, next, page links, and ellipsis.
### Code
```go
package showcase
import "github.com/templui/templui/components/pagination"
templ PaginationDefault() {
@pagination.Pagination(pagination.Props{
Class: "mt-8",
})
@pagination.Content() {
@pagination.Item() {
@pagination.Previous(pagination.PreviousProps{
Href: "?page=1",
Disabled: false,
Label: "Previous",
})
}
@pagination.Item() {
@pagination.Link(pagination.LinkProps{
Href: "?page=1",
}) {
1
}
}
@pagination.Item() {
@pagination.Link(pagination.LinkProps{
Href: "?page=2",
IsActive: true,
}) {
2
}
}
@pagination.Item() {
@pagination.Link(pagination.LinkProps{
Href: "?page=3",
}) {
3
}
}
@pagination.Item() {
@pagination.Ellipsis()
}
@pagination.Item() {
@pagination.Next(pagination.NextProps{
Href: "?page=3",
Label: "Next",
})
}
}
}
```
```
--------------------------------
### Use a component
Source: https://templui.io/docs/how-to-use
Render a component in your application. This example shows how to use the Button component.
```go
@button.Button() {
Click me
}
```
--------------------------------
### Default Card Example
Source: https://templui.io/docs/components/card
A basic example of how to use the Card component to create a project creation form.
```APIDOC
## CardDefault()
### Description
Creates a default card layout suitable for forms or information display.
### Usage
```go
import "github.com/templui/templui/components/card"
// ... inside a templ component
@card.Card() {
@card.Header() {
@card.Title() {
Create Project
}
@card.Description() {
Deploy your new project in one-click.
}
}
@card.Content() {
// Card content goes here
}
@card.Footer(card.FooterProps{
Class: "flex justify-between",
}) {
// Footer actions
}
}
```
```
--------------------------------
### CLI Installation for Date Picker
Source: https://templui.io/docs/components/date-picker
Instructions for installing the Date Picker component using the CLI. This command should be run in your project's terminal.
```bash
templui add datepicker
```
--------------------------------
### Filled Icon Example
Source: https://templui.io/docs/components/icon
Demonstrates how to apply fill and stroke colors to an icon.
```go
package showcase
import "github.com/templui/templui/components/icon"
templ IconFilled() {
@icon.Triangle(icon.Props{Class: "size-6 fill-orange-500 stroke-orange-500"})
}
```
--------------------------------
### Card with Image Example
Source: https://templui.io/docs/components/card
An example demonstrating how to use the Card component with an image at the top.
```APIDOC
## CardWithImage()
### Description
Renders a card component with an image positioned at the top, suitable for featured content.
### Usage
```go
import (
"github.com/templui/templui/components/card"
"github.com/templui/templui/components/aspectratio"
"github.com/templui/templui/components/button"
)
// ... inside a templ component
@card.Card() {
@aspectratio.AspectRatio(aspectratio.Props{
ID: "top-media-aspect",
Ratio: aspectratio.RatioVideo,
Class: "h-full w-full",
}) {
}
This card shows top image usage with lazy loading for better performance.
}
@card.Footer() {
@button.Button() {
Learn more
}
}
}
```
```
--------------------------------
### Install Textarea Component
Source: https://templui.io/docs/components/textarea
Use the CLI to add the textarea component to your project. Load the script once in your layout.
```bash
templui add textarea
```
```html
@textarea.Script()
```
```go
import "github.com/templui/templui/components/textarea"
```
```html
@textarea.Script()
```
--------------------------------
### Setup Asset Routes
Source: https://templui.io/docs/how-to-use
Configure HTTP routes to serve application assets, including TemplUI's embedded component scripts. This function should be called during server setup.
```go
func setupAssetsRoutes(mux *http.ServeMux) {
isDevelopment := os.Getenv("GO_ENV") != "production"
// Your app assets (CSS, fonts, images, ...)
assetHandler := http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
if isDevelopment {
w.Header().Set("Cache-Control", "no-store")
} else {
w.Header().Set("Cache-Control", "public, max-age=31536000")
}
var fs http.Handler
if isDevelopment {
fs = http.FileServer(http.Dir("./assets"))
} else {
fs = http.FileServer(http.FS(assets.Assets))
}
fs.ServeHTTP(w, r)
})
mux.Handle("GET /assets/", http.StripPrefix("/assets/", assetHandler))
// templUI embedded component scripts
utils.SetupScriptRoutes(mux, isDevelopment)
}
```
--------------------------------
### CLI Installation
Source: https://templui.io/docs/components/checkbox
Use the templui CLI to add the checkbox component to your project.
```bash
templui add checkbox
```
--------------------------------
### Install Icon Component
Source: https://templui.io/docs/components/icon
Command to add the Icon component to your project using the CLI.
```bash
templui add icon
```
--------------------------------
### Default Radio Example
Source: https://templui.io/docs/components/radio
Demonstrates the basic usage of the Radio component with descriptions and different states.
```APIDOC
```go
package showcase
import (
"github.com/templui/templui/components/card"
"github.com/templui/templui/components/label"
"github.com/templui/templui/components/radio"
)
templ RadioDefault() {
@radio.Radio(radio.Props{
ID: "plan-1",
Name: "options",
Value: "free",
})
@label.Label(label.Props{
For: "plan-1",
}) {
Free Plan
}
@radio.Radio(radio.Props{
ID: "plan-2",
Name: "options",
Value: "pro",
Checked: true,
})
@label.Label(label.Props{
For: "plan-2",
}) {
Pro Plan
}
Unlock advanced features and priority support.
@radio.Radio(radio.Props{
ID: "enterprise-option",
Name: "options",
Value: "enterprise",
Disabled: true,
})
@label.Label(label.Props{
For: "enterprise-option",
}) {
Enterprise Plan (Coming Soon)
}
@label.Label(label.Props{
For: "card-option",
Class: "block cursor-pointer",
}) {
@card.Card(card.Props{
Class: "hover:border-primary/50 has-[:checked]:ring-1 has-[:checked]:ring-primary has-[:checked]:border-primary transition-all",
}) {
@card.Content(card.ContentProps{
Class: "p-3 flex items-start gap-3",
}) {
@radio.Radio(radio.Props{
ID: "card-option",
Name: "options",
Value: "premium",
})
Premium Features
Access all premium features with unlimited usage.
}
}
}
}
```
```
--------------------------------
### Vertical Separator Example
Source: https://templui.io/docs/components/separator
Shows how to use the Separator component to create a vertical divider between content.
```go
package showcase
import "github.com/templui/templui/components/separator"
templ SeparatorVertical() {
Left
@separator.Separator(separator.Props{
Orientation: separator.OrientationVertical,
Class: "mx-4",
})
Right
}
```
--------------------------------
### Basic Switch Examples
Source: https://templui.io/docs/components/switch
Demonstrates various configurations of the Switch component, including basic toggles, switches with descriptions, and disabled states. Also shows how to integrate switches within a card for settings-like interfaces.
```go
package showcase
import (
"github.com/templui/templui/components/card"
"github.com/templui/templui/components/label"
// "switch" is a reserved Go keyword, so we use an alias
sswitchcomp "github.com/templui/templui/components/switch"
)
templ SwitchDefault() {
@switchcomp.Switch(switchcomp.Props{
ID: "airplane-mode",
})
@label.Label(label.Props{
For: "airplane-mode",
}) {
Airplane Mode
}
@switchcomp.Switch(switchcomp.Props{
ID: "marketing",
Checked: true,
})
@label.Label(label.Props{
For: "marketing",
}) {
Marketing emails
}
Receive emails about new products, features, and more.
@switchcomp.Switch(switchcomp.Props{
ID: "disabled",
Disabled: true,
})
@label.Label(label.Props{
For: "disabled",
Class: "opacity-50",
}) {
Disabled Switch
}
@label.Label(label.Props{
For: "notifications",
Class: "block cursor-pointer",
}) {
@card.Card(card.Props{
Class: "hover:bg-muted/50 transition-colors",
}) {
@card.Content(card.ContentProps{
Class: "flex items-center justify-between p-4",
}) {
Push Notifications
Receive notifications about your account activity.
@switchcomp.Switch(switchcomp.Props{
ID: "notifications",
})
}
}
}
}
```
--------------------------------
### List all available components
Source: https://templui.io/docs/how-to-use
View a list of all components available for installation. You can specify a version tag to list components from a particular release.
```bash
templui list # Latest version
```
```bash
templui list@v0.1.0 # Specific version
```
--------------------------------
### Switch Examples in a Form
Source: https://templui.io/docs/components/switch
Shows how to integrate Switch components within a form structure, including labels, descriptions, and error messages.
```go
package showcase
import (
"github.com/templui/templui/components/form"
// "switch" is a reserved Go keyword, so we use an alias
sswitchcomp "github.com/templui/templui/components/switch"
)
templ SwitchForm() {
@form.Item() {
@form.ItemFlex() {
@switchcomp.Switch(switchcomp.Props{
ID: "airplane-mode",
Name: "airplane",
})
@form.Label(form.LabelProps{
For: "airplane-mode",
}) {
Airplane Mode
}
}
@form.ItemFlex() {
@switchcomp.Switch(switchcomp.Props{
ID: "wifi-mode",
Name: "wifi",
Disabled: true,
})
@form.Label(form.LabelProps{
For: "wifi-mode",
}) {
Wi-Fi
}
}
@form.ItemFlex() {
@switchcomp.Switch(switchcomp.Props{
ID: "bluetooth-mode",
Name: "bluetooth",
Checked: true,
})
@form.Label(form.LabelProps{
For: "bluetooth-mode",
}) {
Bluetooth
}
}
@form.Description() {
Manage your devices connectivity options.
}
@form.Message(form.MessageProps{
Variant: form.MessageVariantError,
}) {
Please configure your connectivity settings.
}
}
}
```
--------------------------------
### Switch Component Installation
Source: https://templui.io/docs/components/switch
Instructions for adding the Switch component to your project using the CLI and the required alias import for Go.
```bash
templui add switch
```
```go
import switchcomp "github.com/templui/templui/components/switch"
---
import switchcomp "your-project/components/switch"
```
--------------------------------
### Badge Default Example
Source: https://templui.io/docs/components/badge
A basic example of the Badge component.
```APIDOC
## Badge Default
```templ
package showcase
import "github.com/templui/templui/components/badge"
templ BadgeDefault() {
@badge.Badge() {
Badge
}
}
```
```
--------------------------------
### Add all components
Source: https://templui.io/docs/how-to-use
Use this command to add all available components to your project.
```bash
templui add "*"
```
--------------------------------
### Install Card Component
Source: https://templui.io/docs/components/card
Use the CLI command to add the card component to your project. Import the component in your Go files.
```bash
templui add card
```
```go
import "github.com/templui/templui/components/card"
```
--------------------------------
### External Trigger Example
Source: https://templui.io/docs/components/sheet
Example of using the Sheet component with an external trigger.
```APIDOC
## External Trigger
This sheet has no internal trigger. The trigger button exists outside the Sheet component.
```go
package showcase
import (
"github.com/templui/templui/components/button"
"github.com/templui/templui/components/sheet"
)
templ SheetExternalTrigger() {
// Sheet with content but no internal trigger
@sheet.Sheet(sheet.Props{
ID: "external-trigger-demo",
Side: sheet.SideRight,
}) {
// No trigger inside - will be triggered externally
@sheet.Content() {
@sheet.Header() {
@sheet.Title() {
External Trigger
}
@sheet.Description() {
This sheet has no internal trigger
}
}
The trigger button exists outside the Sheet component.
@sheet.Footer() {
@sheet.Close() {
@button.Button(button.Props{
Variant: button.VariantOutline,
}) {
Close
}
}
}
}
}
// External trigger outside of Sheet component
@sheet.Trigger(sheet.TriggerProps{
For: "external-trigger-demo",
}) {
@button.Button(button.Props{
Variant: button.VariantOutline,
}) {
Open Sheet
}
}
}
```
```
--------------------------------
### Run Development Server
Source: https://templui.io/docs/how-to-use
Execute this command to start the development server with hot reloading for both Templ and Tailwind CSS.
```bash
task dev
```
--------------------------------
### Default Pagination Example
Source: https://templui.io/docs/components/pagination
Demonstrates the basic structure of the Pagination component with explicit links for previous, page numbers, ellipsis, and next.
```go
package showcase
import "github.com/templui/templui/components/pagination"
templ PaginationDefault() {
@pagination.Pagination(pagination.Props{
Class: "mt-8",
})
@pagination.Content() {
@pagination.Item() {
@pagination.Previous(pagination.PreviousProps{
Href: "?page=1",
Disabled: false,
Label: "Previous",
})
}
@pagination.Item() {
@pagination.Link(pagination.LinkProps{
Href: "?page=1",
}) {
1
}
}
@pagination.Item() {
@pagination.Link(pagination.LinkProps{
Href: "?page=2",
IsActive: true,
}) {
2
}
}
@pagination.Item() {
@pagination.Link(pagination.LinkProps{
Href: "?page=3",
}) {
3
}
}
@pagination.Item() {
@pagination.Ellipsis()
}
@pagination.Item() {
@pagination.Next(pagination.NextProps{
Href: "?page=3",
Label: "Next",
})
}
}
}
}
```
--------------------------------
### Badge with Icon Example
Source: https://templui.io/docs/components/badge
Example of using the Badge component with an embedded icon.
```APIDOC
## Badge With Icon
```templ
package showcase
import (
"github.com/templui/templui/components/badge"
"github.com/templui/templui/components/icon"
)
templ BadgeWithIcon() {
@badge.Badge(badge.Props{
Class: "flex gap-2 items-center",
}) {
// Default icon size in @badge is 16x16
// Use Class: "size-6" for larger icons
@icon.Rocket()
With Icon
}
}
```
```
--------------------------------
### Badge Destructive Example
Source: https://templui.io/docs/components/badge
Example of using the destructive variant for the Badge component.
```APIDOC
## Badge Destructive
```templ
package showcase
import "github.com/templui/templui/components/badge"
templ BadgeDestructive() {
@badge.Badge(badge.Props{
Variant: badge.VariantDestructive,
}) {
Destructive
}
}
```
```
--------------------------------
### Badge Outline Example
Source: https://templui.io/docs/components/badge
Example of using the outline variant for the Badge component.
```APIDOC
## Badge Outline
```templ
package showcase
import "github.com/templui/templui/components/badge"
templ BadgeOutline() {
@badge.Badge(badge.Props{
Variant: badge.VariantOutline,
}) {
Outline
}
}
```
```
--------------------------------
### Default Dropdown Example
Source: https://templui.io/docs/components/dropdown
Demonstrates a basic dropdown with various items including labels, sub-menus, links, and shortcuts. Ensure the dropdown script is loaded in your layout.
```go
package showcase
import (
"github.com/templui/templui/components/button"
"github.com/templui/templui/components/dropdown"
"github.com/templui/templui/components/icon"
)
templ DropdownDefault() {
@dropdown.Dropdown() {
@dropdown.Trigger() {
@button.Button(button.Props{
Variant: button.VariantOutline,
}) {
Open
}
}
@dropdown.Content(dropdown.ContentProps{
Class: "w-56",
}) {
@dropdown.Label() {
My Account
}
@dropdown.Separator()
@dropdown.Group() {
@dropdown.Item() {
Team
}
@dropdown.Sub() {
@dropdown.SubTrigger() {
@icon.Users(icon.Props{Class: "size-4 mr-2"})
Invite users
}
@dropdown.SubContent() {
@dropdown.Item() {
@icon.Mail(icon.Props{Class: "size-4 mr-2"})
Email
}
@dropdown.Item() {
@icon.MessageSquare(icon.Props{Class: "size-4 mr-2"})
Message
}
@dropdown.Separator()
@dropdown.Item() {
More...
}
}
}
@dropdown.Item() {
New Team
@dropdown.Dropdown.Shortcut() {
โ+T
}
}
}
@dropdown.Separator()
@dropdown.Item(dropdown.ItemProps{
Href: "https://github.com",
Target: "_blank",
}) {
@icon.Github(icon.Props{Class: "size-4 mr-2"})
GitHub
}
@dropdown.Item() {
@icon.LifeBuoy(icon.Props{Class: "size-4 mr-2"})
Support
}
@dropdown.Item(dropdown.ItemProps{
Disabled: true,
}) {
@icon.Code(icon.Props{Class: "size-4 mr-2"})
API
}
@dropdown.Separator()
@dropdown.Item() {
@icon.LogOut(icon.Props{Class: "size-4 mr-2"})
Log out
@dropdown.Shortcut() {
โงโQ
}
}
}
}
}
```
--------------------------------
### Badge Secondary Example
Source: https://templui.io/docs/components/badge
Example of using the secondary variant for the Badge component.
```APIDOC
## Badge Secondary
```templ
package showcase
import "github.com/templui/templui/components/badge"
templ BadgeSecondary() {
@badge.Badge(badge.Props{
Variant: badge.VariantSecondary,
}) {
Secondary
}
}
```
```
--------------------------------
### Avatar Default Example
Source: https://templui.io/docs/components/avatar
A basic example of how to use the Avatar component with an image source.
```APIDOC
## Avatar Default
```go
package showcase
import "github.com/templui/templui/components/avatar"
templ AvatarDefault() {
@avatar.Avatar() {
@avatar.Image(avatar.ImageProps{
Src: "https://avatars.githubusercontent.com/u/26936893?v=4",
Alt: "User avatar",
})
}
}
```
```
--------------------------------
### Install Input Component
Source: https://templui.io/docs/components/input
Use the CLI command to add the input component to your project. Load the necessary script once in your layout's head section.
```bash
templui add input
```
```html
@input.Script()
```
```go
import "github.com/templui/templui/components/input"
```
```html
@input.Script()
```
--------------------------------
### Default Alert Example
Source: https://templui.io/docs/components/alert
A basic example of how to use the Alert component with a title and description.
```APIDOC
```go
package showcase
import (
"github.com/templui/templui/components/alert"
"github.com/templui/templui/components/icon"
)
templ AlertDefault() {
@alert.Alert() {
@icon.Rocket()
@alert.Title() {
Note
}
@alert.Description() {
This is a default alert โ check it out!
}
}
}
```
```
--------------------------------
### Button Installation
Source: https://templui.io/docs/components/button
Use the CLI command to add the button component to your project. This also shows the necessary import statement.
```bash
templui add button
```
```go
import "github.com/templui/templui/components/button"
```
--------------------------------
### Destructive Alert Example
Source: https://templui.io/docs/components/alert
An example of the Alert component used for destructive actions or error messages.
```APIDOC
```go
package showcase
import (
"github.com/templui/templui/components/alert"
"github.com/templui/templui/components/icon"
)
templ AlertDestructive() {
@alert.Alert(alert.Props{Variant: alert.VariantDestructive}) {
@icon.TriangleAlert()
@alert.Title() {
Error
}
@alert.Description() {
Your session has expired. Please log in again.
}
}
}
```
```
--------------------------------
### Avatar With Icon Example
Source: https://templui.io/docs/components/avatar
An example showing how to use an icon within the Avatar's fallback content.
```APIDOC
## Avatar With Icon
```go
package showcase
import (
"github.com/templui/templui/components/avatar"
"github.com/templui/templui/components/icon"
)
templ AvatarWithIcon() {
@avatar.Avatar() {
@avatar.Fallback() {
@icon.Camera(icon.Props{Class: "size-[22px] text-muted-foreground"})
}
}
}
```
```
--------------------------------
### Install Form Components via CLI
Source: https://templui.io/docs/components/form
Use this command to add the form components to your project. This is the initial step before importing and using them in your Go code.
```bash
templui add form
```
--------------------------------
### Install Input OTP Component
Source: https://templui.io/docs/components/input-otp
Use the CLI command to add the inputotp component to your project. This command should be run in your terminal.
```bash
templui add inputotp
```
--------------------------------
### Avatar Group Example
Source: https://templui.io/docs/components/avatar
Demonstrates how to group multiple Avatars together, with an example showing a count for additional items.
```APIDOC
## Avatar Group
```go
package showcase
import "github.com/templui/templui/components/avatar"
templ AvatarGroup() {
@avatar.Avatar() {
@avatar.Image(avatar.ImageProps{
Src: "https://avatars.githubusercontent.com/u/26936893?v=4",
Alt: "User avatar",
})
@avatar.Fallback() {
AA
}
}
@avatar.Avatar() {
@avatar.Image(avatar.ImageProps{
Src: "https://avatars.githubusercontent.com/u/26936893?v=4",
Alt: "User avatar",
})
@avatar.Fallback() {
BB
}
}
@avatar.Avatar() {
@avatar.Image(avatar.ImageProps{
Src: "https://avatars.githubusercontent.com/u/26936893?v=4",
Alt: "User avatar",
})
@avatar.Fallback() {
CC
}
}
@avatar.Avatar(avatar.Props{
Class: "text-muted-foreground",
}) {
@avatar.Fallback() {
+2
}
}
}
```
```
--------------------------------
### Install Select Box Component
Source: https://templui.io/docs/components/select-box
Use the CLI to add the selectbox component to your project. Load the necessary script once in your layout file.
```bash
templui add selectbox
```
```html
@selectbox.Script()
```
```go
import "github.com/templui/templui/components/selectbox"
```
```html
@selectbox.Script()
```
--------------------------------
### Install TemplUI CLI
Source: https://templui.io/docs/how-to-use
Install the TemplUI command-line interface tool globally. This command is used for managing TemplUI components within your project.
```bash
go install github.com/templui/templui/cmd/templui@latest
templui --version
```
--------------------------------
### Install Toast Component
Source: https://templui.io/docs/components/toast
Use the CLI command to add the toast component to your project. Load the script once in your layout file.
```bash
templui add toast
```
```html
@toast.Script()
```
```go
import "github.com/templui/templui/components/toast"
```
```html
@toast.Script()
```
--------------------------------
### Update all installed components
Source: https://templui.io/docs/how-to-use
Update all components currently installed in your project to their latest versions. Use the `--force` flag to bypass confirmation prompts.
```bash
templui --installed add # Update all installed components
```
```bash
templui --installed add@v1.0.0 # Update to specific version
```
```bash
templui --force --installed add # Force without prompts
```
--------------------------------
### Basic Table Usage
Source: https://templui.io/docs/components/table
Demonstrates how to use the Table component to display a list of recent hires with headers, rows, and a footer.
```go
package showcase
import "github.com/templui/templui/components/table"
templ Table() {
@table.Table() {
@table.Caption() {
A list of your recent hires.
}
@table.Header() {
@table.Row() {
@table.Head() {
Name
}
@table.Head() {
Role
}
@table.Head() {
Status
}
@table.Head() {
Actions
}
}
}
@table.Body() {
@table.Row() {
@table.Cell() {
John Doe
}
@table.Cell() {
Software Engineer
}
@table.Cell() {
Active
}
@table.Cell() {
Edit
}
}
@table.Row() {
@table.Cell() {
Jane Smith
}
@table.Cell() {
Designer
}
@table.Cell() {
Active
}
@table.Cell() {
Edit
}
}
@table.Row() {
@table.Cell() {
Bob Johnson
}
@table.Cell() {
Product Manager
}
@table.Cell() {
Inactive
}
@table.Cell() {
Edit
}
}
@table.Footer() {
@table.Row() {
@table.Head() {
3 items
}
@table.Head() {
1 page
}
@table.Head() {
1-3 of 3
}
@table.Head() {
Next
}
}
}
}
}
}
```