---
title: Create a component
slug: cms-12/docs/creating-a-component-1
docTags: 
createdAt: 2026-08-10T15:56:02.000Z
---

The component monitors the current page context and displays its name.

```csharp
using EPiServer.Shell.ViewComposition;

namespace AlloyTemplates.Business {
  [
    Component(
      //Auto-plugs in the component to the assets panel of cms (See EPiServer.Shell.PlugInArea
      //in the EPiServer.UI assembly for Dashboard and CMS constants)
      PlugInAreas = "/episerver/cms/assets",
      Categories = "cms",
      WidgetType = "alloy/components/CustomComponent",
      //Define language path to translate Title/Description.
      //LanguagePath = "/customtranslations/components/customcomponent";
      Title = "My custom component",
      Description = "A custom component that shows information about the current content item."
    )
  ]
  public class CustomComponent {}
}
```

The following is the corresponding JavaScript widget:

```javascript
define([
		// Dojo
		"dojo/_base/declare",
		"dojo/html",
		// Dijit
		"dijit/_TemplatedMixin",
		"dijit/_WidgetBase",
		//CMS
		"epi-cms/_ContentContextMixin"
	],
	function(
		// Dojo
		declare,
		html,
		// Dijit
		_TemplatedMixin,
		_WidgetBase,
		//CMS
		_ContentContextMixin
	) {
		return declare([_WidgetBase, _TemplatedMixin, _ContentContextMixin], {
			// summary: A simple widget that listens to changes to the
			// current content item and puts the name in a div.

			templateString: '<div>\
        <div data-dojo-attach-point="contentName"></div>\
      </div>',

			postMixInProperties: function() {
				this.getCurrentContent().then(function(context) {
					this._updateUI(context);
				}.bind(this));
			},

			contextChanged: function(context, callerData) {
				this.inherited(arguments);

				// the context changed, probably because we navigated or published something
				this._updateUI(context);
			},

			_updateUI: function(context) {
				html.set(this.contentName, context.name);
			}
		});
	}
);
```

You can find a working example on [GitHub](https://github.com/episerver/alloy-mvc-template/tree/doc/how-to-create-a-component). Just clone the repository, check out the **doc/how-to-create-a-component** branch, and run the site to see this component in action.

**Related blog posts**

- [Create a React Component](https://world.optimizely.com/blogs/magnus-baneryd/Dates/2017/1/creating-a-react-widget-for-episerver-cms/)
- [Fixed gadgets](https://gregwiechec.com/2018/08/fixed-gadgets/)