ezCater's React UI Component library


46912.4.22 months ago4 years agoMinified + gzip package size for @ezcater/recipe in KB


Recipe logo

Delicious UI components, from ezcater.
Explore website »

NPM version NPM version NPM downloads


npm install @ezcater/recipe --save

Importing components in downstream projects

Import the Recipe package, just as you would any other package dependency:

import {EzButton} from '@ezcater/recipe';

export const MyComponent = () => (
    <EzButton use="primary" onClick={() => alert('You clicked me!')}>
      Click Me!

Contributing / Creating Components

This project uses plop to generate new React components. The functionality is exposed as the create-component npm script from package.json. This will:

  • copy the component template files from templates/component to src/components/YOUR_COMPONENT_NAME,
  • rename all files to match your component's name
  • replace all occurrences of Component inside the component's files with your component's name.

To create a new component, run npm run create-component inside the project. You'll see a CLI that guides you through the process.

After the CLI has finished, all files will have been created in the location you specified. You'll need to add an export for your component to src/index.tsx. For example:

// inside src/index.tsx
export {default as EzButton} from './components/EzButton';


Use the npm start command when making edits to recipe to accomplish the following:

  • Run npm run build:watch; this will recompile any changes made to recipe components
  • Automatically link the local recipe directory to the documentation site
  • Run gatsby develop; this will start up the documentation website and recompile when there are changes to either the recipe or documentation codebase


After contributing updates to recipe, you'll need to publish the recipe package for changes to take effect in downstream projects.

Recipe uses the Changesets Release github action to automate the process of creating a pull request for an up-versioned Recipe release. This process uses the semantic versioning metadata captured as part of our development process. When an automated versioning PR is merged, a new Recipe release will be published to npm on your behalf.


Recipe is licensed under the MIT license.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.