Skip to main content

Creating a new component

In this guide, we will walk you through the process of creating a new React component in the Blueprint project. Depending on your needs, you can create either a single app component or a shared component.

App or Shared?​

Before you start, determine whether your component will be used only within a single app or can be shared across multiple apps. This will help you decide where to place your component. For example, if your component uses core API features that are global across numerous Kraken instances, it should be shared. Conversely, if it uses specific components for a region, such as a custom component for billing information available only in one region (e.g., FR), it should be app-specific.

I need an app component​

  1. Create the component file: Navigate to the appropriate directory within your app (e.g., apps/demo-site/src/components) and create a new file for your component (e.g., SampleComponent.tsx). If the component is specific to a feature, navigate to the feature directory (e.g., apps/demo-site/src/features/sampleFeature/components).

  2. Write the component code: Implement your component using React, TypeScript and Coral for styling. Here is a basic example:

    import { Container } from '@krakentech/coral';

    interface SampleComponentProps {
        title: string;
    }

    const SampleComponent = ({ title }: SampleComponentProps) => {
        return <Container>{title}</Container>;
    };

    export default SampleComponent;

  3. Use the component: Import and use your new component within your app as needed.

    import SampleComponent from './components/SampleComponent';

    const SampleDestinationComponent = () => {
        return (
            <div>
                <SampleComponent title={"Sample title"} />
            </div>
        );
    };

    export default SampleDestinationComponent;

I need a shared package component​

  1. Create the component file: Navigate to the appropriate feature directory within the packages directory (e.g., utils/src/components/SampleFeature/components) and create a new file for your component (e.g., SampleSharedComponent.tsx).

  2. Write the component code: Implement your component using React, TypeScript and Coral for styling. Here is a basic example:

    import { Container } from '@krakentech/coral';

    interface SampleSharedComponentProps {
        title: string;
    }

    const SampleSharedComponent = ({ title }: SampleSharedComponentProps) => {
        return <Container>{title}</Container>;
    };

    export default SampleSharedComponent;

  3. Export the component: Ensure your component is exported from the package's entry point (e.g., packages/utils/src/index.ts).

  4. Build the package: Run pnpm build:packages at the root to build the package and ensure your changes are implemented.

  5. Use the component: Import and use your new shared component within any app as needed.

    import { SampleSharedComponent } from '@krakentech/blueprint-utils';

    const SampleDestinationComponent = () => {
        return (
            <div>
                <SampleSharedComponent title={"Sample title"} />
            </div>
        );
    };

    export default SampleDestinationComponent;

By following these steps, you can create and integrate new components into your project, whether they are specific to a single app or shared across multiple apps.