T templcn/ui
Componentdirection

Direction

Sets the reading direction of content (LTR or RTL).

Preview

Sets the reading direction of content (LTR or RTL).

Direction Provider
Direction Provider example

Installation

Add this component to your project using the CLI.

templcn add direction

Usage

1. Import the component in your Go or templ file:

import "your-module/ui"

2. Use the component in your template:

@ui.DirectionProvider(ui.DirectionProviderProps{Direction: "rtl"}) {
  @ui.Card(ui.DOMProps{}) {
    @ui.CardContent(ui.DOMProps{Class: "p-6"}) {
      <p class="text-sm">RTL layout content with mirrored text direction and alignment.</p>
    }
  }
}

Composition

Use these parts together to build the component.

DirectionProvider
├── Card
├── CardContent

Examples

Named examples and common variations.

RTL

Right-to-left layout direction wrapper.

Direction Provider
Direction Provider example
API Reference
PropTypeDefaultDescription
Directionstring"ltr""ltr" or "rtl".
View source
package ui

import (
	"context"
	"io"

	"github.com/a-h/templ"
)

type DirectionProviderProps struct {
	DOMProps
	Direction string
}

func DirectionProvider(props DirectionProviderProps) templ.Component {
	return templ.ComponentFunc(func(ctx context.Context, w io.Writer) error {
		attrs := attrsFromDOMProps(props.DOMProps, "direction-provider", "")
		if props.Direction != "" {
			attrs["dir"] = props.Direction
		}
		return renderElement(ctx, w, "div", attrs, templ.GetChildren(ctx))
	})
}
Next: Drawer