DynamicHeading | Pol-ui - A beautiful and functional UI library for React and Next.js

DynamicHeading is a component that allows you to render a heading with a dynamic level.

💡

By default the DynamicHeading component renders a h2 tag, but you can change it using the as prop.

To start using the component make sure that you have imported it from Pol-ui:

import { DynamicHeading } from "pol-ui";

Default DynamicHeading

DynamicHeading

import { DynamicHeading } from "pol-ui";
import React from "react";
 
const DynamicHeadingComponent = () => {
  return <DynamicHeading> Dynamic Heading </DynamicHeading>;
};
export default DynamicHeadingComponent;

Props

Prop name	Type	Default	Description
as	string	"h2"	The heading level to render
children	React.ReactNode	-	The content of the heading

Examples

DynamicHeading as H4

To render the DynamicHeading any other heading tag as a h4 you can use the as prop:

DynamicHeading as a H4

import { DynamicHeading } from "pol-ui";
import React from "react";
 
const DynamicHeadingComponent = () => {
  return <DynamicHeading as="h4"> Dynamic Heading </DynamicHeading>;
};
export default DynamicHeadingComponent;

Custom styles

You can use the className prop to customize the styles of the DynamicHeading component:

DynamicHeading as a H4

import { DynamicHeading } from "pol-ui";
import React from "react";
 
const DynamicHeadingComponent = () => {
  return (
    <DynamicHeading className="text-success text-2xl font-bold">
      Dynamic Heading
    </DynamicHeading>
  );
};
export default DynamicHeadingComponent;

Theme

The DynamicHeading doesn't have any styles by default, but you can use the className prop to customize the styles of the component.