Theme CSS Components

Component to display your user image. You can use props .avatar-xxl p-2Classes to format your user images. You can combine avatar classes with padding utility class to give to the image a nice white border.

Supported props for Avatar component:

• className - classes for Avatar element
• size - avatar size xxl, xl, lg, sm. Leave empty for default size.
• image - image url
• alt - image alt
• border - if true, border will be shown around avatar.

Small count and labeling component.

Pill component, similar to Bootstrap's .card.

import { faUserFriends } from "@fortawesome/free-solid-svg-icons" 
import Pill from "../../components/Pill"

export default function page(props) {
  return (
    <Pill
      data={{
        name: "New clients",
        content: "25 new clients",
      }}
      color="blue"
      icon={faUserFriends}
      className="mb-4"
    />
  )
}

This theme also comes with a 150+ Premium SVG icons with appropriate license. No additional purchase is necessary.

You can use new Icon component to conveniently display icons.

<Icon icon="smartphone-1" className="w-3rem h-3rem mb-5 svg-icon-light" />

For a complete icon reference, see here.

Vector icons and social logos on your website with Font Awesome, the web’s most popular icon set and toolkit.

These icons are mostly used in buttons or for social network links. For a complete icon reference, see here.

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faAddressBook } from '@fortawesome/free-solid-svg-icons'

export default function IconsFontAwesome() {
    return (
        <FontAwesomeIcon icon={faAddressBook} />
    )
}