npx shadcn@latest add @shuip/title-section

pnpm dlx shadcn@latest add @shuip/title-section

bun x shadcn@latest add @shuip/title-section

import type * as React from 'react';

export interface TitleSectionProps extends React.RefAttributes<HTMLDivElement> {
  title: string;
  description: string | React.JSX.Element;
}

export function TitleSection({ title, description, ...props }: TitleSectionProps) {
  return (
    <div className='text-center -space-y-2 my-6 max-md:text-sm' {...props}>
      <h1 className='text-4xl md:text-5xl font-bold'>{title}</h1>
      <p className='opacity-80 text-center'>{description}</p>
    </div>
  );
}

The command is the same for Base UI and Radix: the CLI reads the style in your components.json and installs the matching variant.

Title

Lorem ipsum dolor sit amet consectetur, adipisicing elit.

Examples

Default

Title

Lorem ipsum dolor sit amet consectetur, adipisicing elit.

import { TitleSection } from '@/components/block/shuip/title-section';

export default function TitleSectionExample() {
  return <TitleSection title='Title' description='Lorem ipsum dolor sit amet consectetur, adipisicing elit.' />;
}

Prop

Type

Title Section

Title

Examples

Default

Title

On this page