Locale

Input Style

Free Themes

Built-in component themes created by the PrimeFaces Theme Designer.

PrimeOne Design

Saga Saga
Vela Vela
Arya Arya

Premium Themes

Premium themes are only available exclusively for PrimeFaces Theme Designer subscribers and therefore not included in PrimeFaces core.

bootstrap4-blue-light Bootstrap Blue
bootstrap4-purple-light Bootstrap Purple
bootstrap4-blue-dark Bootstrap Blue
bootstrap4-purple-dark Bootstrap Purple

Legacy Free Themes

Luna Amber Luna Amber
Luna Blue Luna Blue
Luna Green Luna Green
Luna Pink Luna Pink
Nova Nova
Nova Nova Alt
Nova Nova Accent

PREMIUM TEMPLATES

Create awesome applications in no time using the premium templates and impress your users.

FlexBox

Easily manage the layout of your components with the responsive FlexBox utilities.

Flex Container

An element can configured as a flexbox container using the p-d-flex or p-d-inline-flex classes.


<div class="p-d-flex">Flex Container</div>
<div class="p-d-inline-flex">Inline Flex Container</div>

Flex Container
Inline Flex Container
Direction

Default is applied using the p-flex-{direction} class where direction can be either of the following.

  • row (default)
  • row-reverse
  • column
  • column-reverse
Row

<div class="p-d-flex">
    <div class="p-mr-2">Item 1</div>
    <div class="p-mr-2">Item 2</div>
    <div>Item 3</div>
</div>

Item 1
Item 2
Item 3
Column

<div class="p-d-flex p-flex-column">
    <div class="p-mb-2">Item 1</div>
    <div class="p-mb-2">Item 2</div>
    <div>Item 3</div>
</div>

Item 1
Item 2
Item 3
Responsive

Row direction for larger screens and column for smaller.


<div class="p-d-flex p-flex-column p-flex-md-row">
    <div class="p-mb-2 p-mr-2">Item 1</div>
    <div class="p-mb-2 p-mr-2">Item 2</div>
    <div class="p-mb-2 p-mr-2">Item 3</div>
</div>

Item 1
Item 2
Item 3
Direction Classes
  • p-flex-row
  • p-flex-row-reverse
  • p-flex-column
  • p-flex-column-reverse
  • p-flex-sm-row
  • p-flex-sm-row-reverse
  • p-flex-sm-column
  • p-flex-sm-column-reverse
  • p-flex-md-row
  • p-flex-md-row-reverse
  • p-flex-md-column
  • p-flex-md-column-reverse
  • p-flex-lg-row
  • p-flex-lg-row-reverse
  • p-flex-lg-column
  • p-flex-lg-column-reverse
  • p-flex-xl-row
  • p-flex-xl-row-reverse
  • p-flex-xl-column
  • p-flex-xl-column-reverse
Order

Order configures the way in which they appear in the flex container. p-order-{value} format is used where value can be a number from 0 to 6.

Customized

<div class="p-d-flex">
    <div class="p-mr-2 p-order-3">Item 1</div>
    <div class="p-mr-2 p-order-1">Item 2</div>
    <div class="p-mr-2 p-order-2">Item 3</div>
</div>

Item 1
Item 2
Item 3
Responsive

Orders change depending on the screen size.


<div class="p-d-flex">
    <div class="p-mr-2 p-order-3 p-order-md-2">Item 1</div>
    <div class="p-mr-2 p-order-1 p-order-md-3">Item 2</div>
    <div class="p-mr-2 p-order-2 p-order-md-1">Item 3</div>
</div>

Item 1
Item 2
Item 3
Order Classes
  • p-order-0
  • p-order-1
  • p-order-2
  • p-order-3
  • p-order-4
  • p-order-5
  • p-order-6
  • p-order-sm-0
  • p-order-sm-1
  • p-order-sm-2
  • p-order-sm-3
  • p-order-sm-4
  • p-order-sm-5
  • p-order-sm-6
  • p-order-md-0
  • p-order-md-1
  • p-order-md-2
  • p-order-md-3
  • p-order-md-4
  • p-order-md-5
  • p-order-md-6
  • p-order-lg-0
  • p-order-lg-1
  • p-order-lg-2
  • p-order-lg-3
  • p-order-lg-4
  • p-order-lg-5
  • p-order-lg-6
  • p-order-xl-0
  • p-order-xl-1
  • p-order-xl-2
  • p-order-xl-3
  • p-order-xl-4
  • p-order-xl-5
  • p-order-xl-6
Wrap

Flex wrap defines the wrap behavior when there is not enough space in the container. The format of the class is p-flex-{value} and the value field can be either of the listed alternatives.

  • nowrap (default)
  • wrap
  • wrap-reverse
No Wrap

<div class="p-d-flex">
    <div class="p-mr-2 p-mb-2">Item 1</div>
    <div class="p-mr-2 p-mb-2">Item 2</div>
    <div class="p-mr-2 p-mb-2">Item 3</div>
    <div class="p-mr-2 p-mb-2">Item 4</div>
    <div class="p-mr-2 p-mb-2">Item 5</div>
    <div class="p-mr-2 p-mb-2">Item 6</div>
</div>

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Wrap

<div class="p-d-flex p-flex-wrap">
    <div class="p-mr-2 p-mb-2">Item 1</div>
    <div class="p-mr-2 p-mb-2">Item 2</div>
    <div class="p-mr-2 p-mb-2">Item 3</div>
    <div class="p-mr-2 p-mb-2">Item 4</div>
    <div class="p-mr-2 p-mb-2">Item 5</div>
    <div class="p-mr-2 p-mb-2">Item 6</div>
</div>

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Wrap Reverse

<div class="p-d-flex p-flex-wrap-reverse">
    <div class="p-mr-2 p-mb-2">Item 1</div>
    <div class="p-mr-2 p-mb-2">Item 2</div>
    <div class="p-mr-2 p-mb-2">Item 3</div>
    <div class="p-mr-2 p-mb-2">Item 4</div>
    <div class="p-mr-2 p-mb-2">Item 5</div>
    <div class="p-mr-2 p-mb-2">Item 6</div>
</div>

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Wrap Classes
  • p-flex-nowrap
  • p-flex-wrap
  • p-flex-wrap-reverse
  • p-flex-sm-nowrap
  • p-flex-sm-wrap
  • p-flex-sm-wrap-reverse
  • p-flex-md-nowrap
  • p-flex-md-wrap
  • p-flex-md-wrap-reverse
  • p-flex-lg-nowrap
  • p-flex-lg-wrap
  • p-flex-lg-wrap-reverse
  • p-flex-xl-nowrap
  • p-flex-xl-wrap
  • p-flex-xl-wrap-reverse
Justify Content

Justify content is the alignment along the main axis and defined using the p-jc-{value} format with responsive alternatives. Value field accepts the options below.

  • start
  • end
  • center
  • between
  • around
  • evenly
Between

<div class="p-d-flex p-jc-between">
    <div>Item 1</div>
    <div>Item 2</div>
</div>

Item 1
Item 2
Center

<div class="p-d-flex p-jc-center">
    <div class="p-mr-2">Item 1</div>
    <div>Item 2</div>
</div>

Item 1
Item 2
Justify Content Classes
  • p-jc-start
  • p-jc-end
  • p-jc-center
  • p-jc-between
  • p-jc-around
  • p-jc-evenly
  • p-jc-sm-start
  • p-jc-sm-end
  • p-jc-sm-center
  • p-jc-sm-between
  • p-jc-sm-around
  • p-jc-sm-evenly
  • p-jc-md-start
  • p-jc-md-end
  • p-jc-md-center
  • p-jc-md-between
  • p-jc-md-around
  • p-jc-md-evenly
  • p-jc-lg-start
  • p-jc-lg-end
  • p-jc-lg-center
  • p-jc-lg-between
  • p-jc-lg-around
  • p-jc-lg-evenly
  • p-jc-xl-start
  • p-jc-xl-end
  • p-jc-xl-center
  • p-jc-xl-between
  • p-jc-xl-around
  • p-jc-xl-evenly
Align Items

Align Items configuration is the alignment along the cross axis and defined using the p-ai-{value} format with responsive alternatives. Value field accepts the options below.

  • start
  • end
  • center
  • baseline
  • stretch (default)
Start

<div class="p-d-flex p-ai-start">
    <div class="p-mr-2" style="height:100px">Item 1</div>
    <div style="height:50px">Item 2</div>
</div>

Item 1
Item 2
Center

<div class="p-d-flex p-ai-center">
    <div class="p-mr-2" style="height:100px">Item 1</div>
    <div style="height:50px">Item 2</div>
</div>

Item 1
Item 2
Align Items Classes
  • p-ai-start
  • p-ai-end
  • p-ai-center
  • p-ai-baseline
  • p-ai-strech
  • p-ai-sm-start
  • p-ai-sm-end
  • p-ai-sm-center
  • p-ai-sm-baseline
  • p-ai-sm-strech
  • p-ai-md-start
  • p-ai-md-end
  • p-ai-md-center
  • p-ai-md-baseline
  • p-ai-md-strech
  • p-ai-lg-start
  • p-ai-lg-end
  • p-ai-lg-center
  • p-ai-lg-baseline
  • p-ai-lg-strech
  • p-ai-xl-start
  • p-ai-xl-end
  • p-ai-xl-center
  • p-ai-xl-baseline
  • p-ai-xl-strech
Align Self

Align self configuration is the alignment along the cross axis for a particular element and defined using the p-as-{value} format with responsive alternatives. Value field accepts the options below.

  • start
  • end
  • center
  • baseline
  • stretch (default)

<div class="p-d-flex" style="height: 150px;">
    <div class="p-mr-2 p-as-start">Start</div>
    <div class="p-mr-2 p-as-center">Center</div>
    <div class="p-mr-2 p-as-end">End</div>
    <div class="p-mr-2 p-as-stretch">Stretch</div>
</div>

Start
Center
End
Stretch
Align Items Classes
  • p-as-start
  • p-as-end
  • p-as-center
  • p-as-baseline
  • p-as-strech
  • p-as-sm-start
  • p-as-sm-end
  • p-as-sm-center
  • p-as-sm-baseline
  • p-as-sm-strech
  • p-as-md-start
  • p-as-md-end
  • p-as-md-center
  • p-as-md-baseline
  • p-as-md-strech
  • p-as-lg-start
  • p-as-lg-end
  • p-as-lg-center
  • p-as-lg-baseline
  • p-as-lg-strech
  • p-as-xl-start
  • p-as-xl-end
  • p-as-xl-center
  • p-as-xl-baseline
  • p-as-xl-strech
Align Content

Align content is the alignment along the cross axis and defined using the p-ac-{value} format with responsive alternatives. Value field accepts the options below.

  • start
  • end
  • center
  • around
  • stretch
  • between
Align Content Classes
  • p-ac-start
  • p-ac-end
  • p-ac-center
  • p-ac-around
  • p-ac-stretch
  • p-ac-between
  • p-ac-sm-start
  • p-ac-sm-end
  • p-ac-sm-center
  • p-ac-sm-around
  • p-ac-sm-stretch
  • p-ac-sm-between
  • p-ac-md-start
  • p-ac-md-end
  • p-ac-md-center
  • p-ac-md-around
  • p-ac-md-stretch
  • p-ac-md-between
  • p-ac-lg-start
  • p-ac-lg-end
  • p-ac-lg-center
  • p-ac-lg-around
  • p-ac-lg-stretch
  • p-ac-lg-between
  • p-ac-xl-start
  • p-ac-xl-end
  • p-ac-xl-center
  • p-ac-xl-around
  • p-ac-xl-stretch
  • p-ac-xl-between
Margin with FlexBox

When combined with spacing utilities, flexbox offers endless possibilities.

Horizontal Spacing

<div class="p-d-flex p-p-3 card">
    <Button type="Button" icon="pi pi-check" class="p-mr-2" />
    <Button type="Button" icon="pi pi-trash" class="p-button-danger"/>
    <Button type="Button" icon="pi pi-search" class="p-ml-auto p-button-help"/>
</div>

Vertical Spacing

<div class="p-d-flex p-flex-column" style="height:150px">
    <div>Item 1</div>
    <div class="p-mt-auto">Item 2</div>
</div>

Item 1
Item 2