Input Style

Free Themes

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

Saga Saga
Vela Vela
Arya Arya

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.

ThemeSwitcher

ThemeSwitcher applies new themes on-the-fly without full page refresh.


Dialog
Resistance to PrimeFaces is futile!
Panel
Panel Content
Tab1 Content

<div class="card">
    <h:form>

        <h:panelGrid columns="2" cellpadding="10">
            <p:outputLabel for="basic" value="Basic:"/>
            <p:themeSwitcher id="basic" style="width:165px">
                <f:selectItem itemLabel="Choose Theme" itemValue=""/>
                <f:selectItems value="#{themeSwitcherView.themes}" var="theme" itemLabel="#{theme.displayName}"
                               itemValue="#{theme.name}"/>
            </p:themeSwitcher>

            <p:outputLabel for="advanced" value="Advanced:"/>
            <p:themeSwitcher id="advanced" style="width:165px" effect="fade" var="t">
                <f:selectItem itemLabel="Choose Theme" itemValue="#{null}"/>
                <f:selectItems value="#{themeSwitcherView.themes}" var="theme" itemLabel="#{theme.displayName}"
                               itemValue="#{theme}"/>

                <p:column>
                    <h:graphicImage name="showcase/images/themeswitcher/themeswitcher-#{t.name}.png"
                                    alt="#{t.name}" styleClass="ui-theme"/>
                </p:column>

                <p:column>
                    #{t.displayName}
                </p:column>
            </p:themeSwitcher>
        </h:panelGrid>

        <p:separator/>

        <p:dialog header="Dialog" widgetVar="dlg" minHeight="40" modal="true">
            <h:outputText value="Resistance to PrimeFaces is futile!"/>
        </p:dialog>

        <p:commandButton value="Dialog" onclick="PF('dlg').show()" type="button" style="display:block;"/>

        <p:panel header="Panel" style="margin:20px 0px">
            Panel Content
        </p:panel>

        <p:spinner/>

        <p:toolbar style="margin:20px 0px">
            <f:facet name="left">
                <p:commandButton type="button" value="New" icon="pi pi-file"/>
                <p:commandButton type="button" value="Open" icon="pi pi-folder-open"/>
                <p:commandButton type="button" title="Save" icon="pi pi-save"/>
                <p:commandButton type="button" title="Delete" icon="pi pi-trash"/>
                <p:commandButton type="button" title="Print" icon="pi pi-print"/>
            </f:facet>

            <f:facet name="right">
                <p:menuButton value="Navigate">
                    <p:menuitem value="Home" url="http://www.primefaces.org"/>
                    <p:menuitem value="ShowCase" url="http://www.primefaces.org/showcase"/>
                    <p:menuitem value="TouchFaces" url="http://www.primefaces.org/showcase/touch"/>
                </p:menuButton>
            </f:facet>
        </p:toolbar>

        <p:accordionPanel>
            <p:tab title="Tab1">Tab1 Content</p:tab>
            <p:tab title="Tab2">Tab2 Content</p:tab>
            <p:tab title="Tab3">Tab3 Content</p:tab>
        </p:accordionPanel>

    </h:form>
</div>