Back to Design System

Component Template

Use this template to create new component documentation pages

How to Create a New Component Page

  1. Create a new folder and page

    Create a new folder under src/app/consistency/[component-name] with a page.tsx file

  2. Copy the template

    Use the template below as a starting point for your component page

  3. Add your component

    Import your component and replace the placeholders with actual component details

  4. Add examples

    Create useful examples that demonstrate the component's features

  5. Add to the main page

    Add your component to the appropriate category in the main Consistency page

Component Page Template

tsx
1'use client';
2 
3import { Icon } from '@iconify/react';
4import ComponentPage from '@/components/ComponentPage';
5import YourComponent from '@/components/YourComponent';
6 
7export default function YourComponentPage() {
8  // Basic component example
9  const basicComponent = <YourComponent>Basic Example</YourComponent>;
10  const basicCode = `<YourComponent>Basic Example</YourComponent>`;
11 
12  // Props definitions
13  const propDefinitions = [
14    {
15      name: 'propName',
16      type: 'string',
17      defaultValue: "'default value'",
18      required: false,
19      description: 'Description of what this prop does'
20    },
21    {
22      name: 'requiredProp',
23      type: 'ReactNode',
24      required: true,
25      description: 'This prop is required for the component to work'
26    }
27  ];
28 
29  // Examples
30  const examples = [
31    {
32      title: 'Example Title',
33      description: 'Description of what this example demonstrates',
34      code: `<YourComponent propName="value">
35  Example content
36</YourComponent>`,
37      preview: (
38        <YourComponent propName="value">
39          Example content
40        </YourComponent>
41      )
42    }
43  ];
44 
45  return (
46    <ComponentPage
47      title="YourComponent"
48      description="Brief description of what your component does"
49      component={basicComponent}
50      componentCode={basicCode}
51      propDefinitions={propDefinitions}
52      examples={examples}
53    >
54      <p>
55        Provide additional documentation about your component here. This section
56        can include use cases, best practices, and other guidelines.
57      </p>
58    </ComponentPage>
59  );
60}

Tips for Great Documentation

  • Keep examples simple and focused

    Each example should demonstrate one concept or feature clearly

  • Document all props thoroughly

    Provide clear descriptions for each prop, including type information and default values

  • Include accessibility information

    Document any accessibility considerations or features of your component

  • Show variations

    Include examples that show different states, sizes, and variants of your component