Suncel home pageSuncel logoSuncel v1.1
  1. Text

Builder component > Text


To edit a simple text in real-time in the page builder.

Property type

The Text component will interact with a string property of your Block.

Component properties

interface TextProps 
  slug: string;
  value: string;
  className?: string;
  style?: React.CSSProperties
  tagName?: string;
  • slug: The slug name of the block property to edit.

  • value: needs to pass the value of the property itself.

  • tagName: HTML tag surrounding the text, default: 'p'. 


import { SuncelBlock } from "@suncel/nextjs";
import { Text } from "@suncel/nextjs/components";

interface MyComponentProps {
  slug: string;

export const MyComponent: SuncelBlock<MyComponentProps> = ({ slug }) => {
  return <Text slug='slug' value={slug} tagName='span'/>;