---
title: "Create a custom component"
description: "Compose a project component from Systhema primitives without rebuilding their styling."
requested_language: ar
language: en
translation_notice: "This page isn't translated yet"
url: https://docs.systhema.app/ar/next/guides/recipes/custom-component
version: unreleased (main)
docs_index: https://docs.systhema.app/ar/next/llms.txt
---
> This page isn't translated yet. Showing English.


## Goal

Create an enquiry action that can be reused in code-owned pages. Use Systhema's Button and typography so a design change updates every instance.

## 1. Check the catalog and tokens

Look for a shipped component before writing one. Read [Button](https://docs.systhema.app/ar/next/components/button.md), [Paragraph](https://docs.systhema.app/ar/next/components/paragraph.md) and the project's button variants. This example uses the default `primary` variant.

## 2. Create the component

```tsx title="src/components/EnquiryAction.tsx"
import { Button, ButtonTitle, Paragraph } from '@systhemaui/next'

type EnquiryActionProps = {
  href: string
  label?: string
}

export function EnquiryAction({ href, label = 'Discuss your project' }: EnquiryActionProps) {
  return (
    <Paragraph>
      <Button.a href={href} variant="primary">
        <ButtonTitle>{label}</ButtonTitle>
      </Button.a>
    </Paragraph>
  )
}
```

The Paragraph supplies the content rhythm for a single inline action. A row of several actions would use Stack instead.

## 3. Use it inside a content container

```tsx title="src/components/ContactSection.tsx"
import { Section, Heading, Paragraph } from '@systhemaui/next'
import { EnquiryAction } from './EnquiryAction'

export function ContactSection() {
  return (
    <Section>
      <Heading.h2>Start with a conversation</Heading.h2>
      <Paragraph>Tell us what your team needs from its next workplace.</Paragraph>
      <EnquiryAction href="/contact" />
    </Section>
  )
}
```

Render ContactSection inside an Article. For multilingual sites, supply a locale-aware href from the application's routing helpers. Do not hardcode the default locale into a shared action.

## 4. Keep styling in the design system

Use named variants, token typography and semantic color slots. Do not add a raw background, radius or padding to imitate the shipped Button. If every primary button needs a change, update its design tokens.

Add `'use client'` only when the component itself needs browser state or events. Keep runtime imports from `payload` and the bare core barrel out of client-reachable code. For client token access, use `@systhemaui/core/client`.

If editors must choose this composition in rich text, register a [custom block](https://docs.systhema.app/ar/next/guides/build-a-site/custom-block.md). A TSX component alone does not add an Admin block.

## Check your work

- The action uses the project's named variant.
- It has a readable accessible name and visible keyboard focus.
- It inherits the parent theme and spacing.
- Locale-specific pages link to the intended contact page.
- Type checking and lint pass.