Create Project
Deploy your new project in one-click.
PostgreSQL
MySQL
SQLite
package showcase
import (
"github.com/axzilla/templui/internal/components/button"
"github.com/axzilla/templui/internal/components/card"
"github.com/axzilla/templui/internal/components/input"
"github.com/axzilla/templui/internal/components/label"
"github.com/axzilla/templui/internal/components/selectbox"
)
templ CardDefault() {
<div class="w-full max-w-sm">
@card.Card() {
@card.Header() {
@card.Title() {
Create Project
}
@card.Description() {
Deploy your new project in one-click.
}
}
@card.Content() {
<div class="flex flex-col gap-4">
<div class="w-full max-w-sm grid gap-2">
@label.Label(label.Props{
For: "name",
}) {
Name
}
@input.Input(input.Props{
ID: "name",
Placeholder: "Enter project name",
})
</div>
<div class="w-full max-w-sm grid gap-2">
@label.Label(label.Props{
For: "service",
}) {
Service
}
@selectbox.SelectBox() {
@selectbox.Trigger(selectbox.TriggerProps{
ID: "service",
}) {
@selectbox.Value(selectbox.ValueProps{
Placeholder: "Select",
})
}
@selectbox.Content() {
@selectbox.Group() {
@selectbox.Item(selectbox.ItemProps{
Value: "postgres",
}) {
PostgreSQL
}
@selectbox.Item(selectbox.ItemProps{
Value: "mysql",
}) {
MySQL
}
@selectbox.Item(selectbox.ItemProps{
Value: "sqlite",
}) {
SQLite
}
}
}
}
</div>
</div>
}
@card.Footer(card.FooterProps{
Class: "flex justify-between",
}) {
@button.Button(button.Props{
Variant: button.VariantSecondary,
}) {
Cancel
}
@button.Button() {
Deploy
}
}
}
</div>
}
Installation
templui add cardExamples
Image Left
Side Image Card
With left-aligned image
This card demonstrates the left image layout.
package showcase
import (
"github.com/axzilla/templui/internal/components/aspectratio"
"github.com/axzilla/templui/internal/components/card"
)
templ CardImageLeft() {
<div class="w-full max-w-sm">
@card.Card() {
@card.Horizontal() {
@card.Media(card.MediaProps{
ID: "left-media",
Alt: "Left side image",
Position: card.MediaPositionLeft,
Width: card.MediaWidthThird,
AspectRatio: aspectratio.RatioAuto,
Src: "/assets/img/card_placeholder.jpeg",
},
)
<div class="flex flex-col flex-1">
@card.Header() {
@card.Title() {
Side Image Card
}
@card.Description() {
With left-aligned image
}
}
@card.Content() {
<p>This card demonstrates the left image layout.</p>
}
</div>
}
}
</div>
}
Image Right
Side Image Card
With right-aligned image
This card demonstrates the right image layout.
package showcase
import (
"github.com/axzilla/templui/internal/components/aspectratio"
"github.com/axzilla/templui/internal/components/card"
)
templ CardImageRight() {
<div class="w-full max-w-sm">
@card.Card() {
@card.Horizontal() {
<div class="flex flex-col flex-1">
@card.Header() {
@card.Title() {
Side Image Card
}
@card.Description() {
With right-aligned image
}
}
@card.Content() {
<p>This card demonstrates the right image layout.</p>
}
</div>
@card.Media(card.MediaProps{
ID: "right-media",
Alt: "Right side image",
Position: card.MediaPositionRight,
Width: card.MediaWidthThird,
AspectRatio: aspectratio.RatioAuto,
Src: "/assets/img/card_placeholder.jpeg",
},
)
}
}
</div>
}
Image Top
Featured Card
With top image
This card shows top image usage.
package showcase
import (
"github.com/axzilla/templui/internal/components/aspectratio"
"github.com/axzilla/templui/internal/components/button"
"github.com/axzilla/templui/internal/components/card"
)
templ CardImageTop() {
<div class="w-full max-w-sm">
@card.Card() {
@card.Media(card.MediaProps{
ID: "top-media",
Alt: "Card image",
Position: card.MediaPositionTop,
AspectRatio: aspectratio.RatioVideo,
Src: "/assets/img/card_placeholder.jpeg",
},
)
@card.Header() {
@card.Title() {
Featured Card
}
@card.Description() {
With top image
}
}
@card.Content() {
<p>This card shows top image usage.</p>
}
@card.Footer() {
@button.Button() {
Learn more
}
}
}
</div>
}
Image Bottom
Featured Card
With bottom image
This card shows bottom image usage.
package showcase
import (
"github.com/axzilla/templui/internal/components/aspectratio"
"github.com/axzilla/templui/internal/components/button"
"github.com/axzilla/templui/internal/components/card"
)
templ CardImageBottom() {
<div class="w-full max-w-sm">
@card.Card() {
@card.Header() {
@card.Title() {
Featured Card
}
@card.Description() {
With bottom image
}
}
@card.Content() {
<p>This card shows bottom image usage.</p>
}
@card.Footer() {
@button.Button() {
Learn more
}
}
@card.Media(card.MediaProps{
ID: "bottom-media",
Alt: "Card image",
Position: card.MediaPositionBottom,
AspectRatio: aspectratio.RatioVideo,
Src: "/assets/img/card_placeholder.jpeg",
},
)
}
</div>
}