Custom Component Templates


These docs rely on Slice Machine, which is in active development and subject to change. Content Relationships are not currently supported with Slices.

By the end of this document, you'll learn how to create a custom component template to be generated by the create Slice + button instead of the default.

Override the Default Slice Template

There can be many use-cases where you might need to customize the default Slice template, such as modifying the component HTML structure or even adding your own typings if you are using TypeScript.

To do so, generate the default component template in slices path by clicking the + button to create a new Slice. When you run the create a slice name it slice-template, as shown below, this folder name will let the CLI know that this is the new template.

slices / slice-template
├── index.js
└── index.stories.js
└── mocks.json
└── model.json

Now you can modify the custom template to fit with your use-case. Check this article to learn more about modeling and creating your Slice/Component. The example below is what it might look like if you wanted to generate an scss file every time you create a new Slice.

slices / slice-template
├── index.tsx
└── index.stories.tsx
└── mocks.json
└── model.json

Note that you will also need to modify the corresponding stories, mocks, and models that you need to copy from the default template.

Now every time you create a Slice it will use the custom template. 😁

Related articles

Was this article helpful?
Not really
Yes, Thanks

Can't find what you're looking for? Get in touch with us on our Community Forum.