{"pageProps":{"error":null,"preview":false,"file":{"fileRelativePath":"content/docs/ui.md","data":{"frontmatter":{"title":"Configure the User Interface","prev":null,"next":"/docs/ui/inline-editing","consumes":[{"file":"/packages/react-sidebar/src/sidebar.ts","details":"Shows sidebar interface"},{"file":"/packages/react-toolbar/src/toolbar.ts","details":"Shows toolbar interface"}]},"excerpt":" The tinacms package provides two possible user interfaces: the sidebar and the toolbar. The main difference between the two UIs is aesthetics. Both provide access to Screen Plugins and buttons for&hellip;","markdownBody":"\nThe `tinacms` package provides two possible user interfaces: the sidebar and the toolbar.\n\nThe main difference between the two UIs is aesthetics. Both provide access to [Screen Plugins](/blog/screen-plugins) and buttons for _saving_ and _resetting_ [Forms](). The main difference is in how they expect the Form's content to be edited: Form's are rendered within the sidebar, while the toolbar is designed to work with [Inline Editing](/docs/ui/inline-editing). Also, widgets can be added to the toolbar as plugins, as in the case of the Branch Switcher provided by `react-tinacms-github` .\n\n## Enabling the User Interface\n\nBy default neither UI is enabled. You can enable one (or both) by setting their flags to true in the `TinaCMS` configuration:\n\n```ts\nnew TinaCMS({\n  sidebar: true,\n  toolbar: true,\n})\n```\n\nThis will enable the UIs with their default configuration. If you need to configure either UI further, you can pass that object instead:\n\n```ts\nnew TinaCMS({\n  sidebar: {\n    position: 'displace',\n  },\n})\n```\n\nLet's take a look at the configuration options for each UI.\n\n### Sidebar Configuration\n\n```ts\ninterface SidebarOptions {\n  position?: 'displace' | 'overlay'\n  placeholder?: React.FC\n  buttons?: {\n    save: string\n    reset: string\n  }\n}\n```\n\n| key             | usage                                                                                                                                                          |\n| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| **position**    | Determines sidebar **position in relation to the website**. 'displace' (default) moves the whole site over; 'overlay' slides the sidebar on top of the site.   |\n| **placeholder** | Provides a placeholder component to render in the sidebar when there are no registered forms.                                                                  |\n| **buttons**     | _Deprecated — [Configure on the form instead](/docs/forms#customizing-form-buttons)_: Customizes the string displayed on either the 'save' or 'reset' buttons. |\n\nA site configured to use Tina will display a **blue edit button in the lower-left corner**. Clicking this button will open the sidebar.\n\n![Sidebar after adding remarkform to your template](/img/tina-sidebar-remarkform-gatsby-london.gif)\n\nSidebar contents are **contextual**. For example, when using Tina with Markdown files, a conventional implementation will display a form for the current page's markdown file. In the event a page is composed of multiple files, it is possible to add multiple forms to the sidebar for that page's context. All forms available in the current context will then be displayed.\n\n<!-- TODO: add toolbar photo here -->\n\n### Toolbar Configuration\n\n```ts\ninterface ToolbarOptions {\n  buttons?: {\n    save: string\n    reset: string\n  }\n}\n```\n\n| key         | usage                                                                                                                                                          |\n| ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| **buttons** | _Deprecated — [Configure on the form instead](/docs/forms#customizing-form-buttons)_: Customizes the string displayed on either the 'save' or 'reset' buttons. |\n\nOn its own, the toolbar will display the 'Save' and 'Reset' buttons, along with a form status indicator to show whether there are unsaved changes. [Custom Widgets](/guides/nextjs/github/toolbar-plugins) can also be added to extend functionality for the particular workflow.\n\n> _Note:_ **It is now recommended to configure the 'Save' & 'Reset' button text [on the form](/docs/forms#customizing-form-buttons)** intead of in the UI options. Please note that if `buttons` are configured on the CMS through the `sidebar` or `toolbar` options (as in the examples below), those values will take precedent over custom button values passed to a form.\n\n## Examples\n\n### With Gatsby\n\nYou'll want to pass in this option to wherever the plugin is registered in the `gatsby-config` file.\n\n**gatsby-config.js**\n\n```js\n{\n  resolve: \"gatsby-plugin-tinacms\",\n  options: {\n    enabled: process.env.NODE_ENV !== \"production\",\n    sidebar: {\n      position: 'displace',\n      buttons: {\n        save: \"Commit\",\n        reset: \"Reset\",\n      }\n    },\n  }\n}\n```\n\n### With Next.js\n\nIf you followed the implementation in our Next.js docs, you'll want to go to the `_app.js` file where the CMS is registered. Again, depending on your setup with Next + Tina, this config may look slightly different. Note this is also where you might specify the sidebar [display options](https://tinacms.org/docs/concepts/sidebar#sidebar-style).\n\n**pages/\\_app.js**\n\n```javascript\nclass MyApp extends App {\n  constructor() {\n    super()\n\n    this.cms = new TinaCMS({\n      toolbar: true,\n    })\n  }\n\n  render() {\n    const { Component, pageProps } = this.props\n    return (\n      <Tina cms={this.cms}>\n        <Component {...pageProps} />\n      </Tina>\n    )\n  }\n}\n```\n"}},"tocItems":"- [Enabling the User Interface](#enabling-the-user-interface)\n  * [Sidebar Configuration](#sidebar-configuration)\n  * [Toolbar Configuration](#toolbar-configuration)\n- [Examples](#examples)\n  * [With Gatsby](#with-gatsby)\n  * [With Next.js](#with-nextjs)","docsNav":[{"title":"Getting Started","id":"getting-started","items":[{"id":"/docs/getting-started/introduction","slug":"/docs/getting-started/introduction","title":"Introduction"}]},{"title":"CMS","id":"the-cms","items":[{"id":"/docs/cms","slug":"/docs/cms","title":"Overview"}]},{"title":"User Interface","id":"user-interface","items":[{"id":"/docs/ui","title":"Sidebar & Toolbar","slug":"/docs/ui"},{"title":"Inline Editing","id":"inline-editing","slug":"/docs/ui/inline-editing","items":[{"id":"/docs/ui/inline-editing/inline-text","title":"Inline Text","slug":"/docs/ui/inline-editing/inline-text"},{"id":"/docs/ui/inline-editing/inline-textarea","title":"Inline Textarea","slug":"/docs/ui/inline-editing/inline-textarea"},{"id":"/docs/ui/inline-editing/inline-wysiwyg","title":"Inline Wysiwyg","slug":"/docs/ui/inline-editing/inline-wysiwyg"},{"id":"/docs/ui/inline-editing/inline-image","title":"Inline Image","slug":"/docs/ui/inline-editing/inline-image"},{"id":"/docs/ui/inline-editing/inline-group","title":"Inline Group","slug":"/docs/ui/inline-editing/inline-group"},{"id":"/docs/ui/inline-editing/inline-blocks","title":"Inline Blocks","slug":"/docs/ui/inline-editing/inline-blocks"}]},{"id":"/docs/ui/alerts","title":"Alerts","slug":"/docs/ui/alerts"},{"id":"/docs/ui/styles","title":"Custom Styles","slug":"/docs/ui/styles"}]},{"id":"plugins","title":"Plugins","items":[{"title":"About Plugins","id":"forms","slug":"/docs/plugins"},{"title":"Forms","id":"forms","slug":"/docs/plugins/forms"},{"title":"Fields","id":"fields","slug":"/docs/plugins/fields","items":[{"id":"/docs/plugins/fields/text","slug":"/docs/plugins/fields/text","title":"Text"},{"id":"/docs/plugins/fields/textarea","slug":"/docs/plugins/fields/textarea","title":"Text Area"},{"id":"/docs/plugins/fields/number","slug":"/docs/plugins/fields/number","title":"Number"},{"id":"/docs/plugins/fields/image","slug":"/docs/plugins/fields/image","title":"Image"},{"id":"/docs/plugins/fields/color","slug":"/docs/plugins/fields/color","title":"Color"},{"id":"/docs/plugins/fields/toggle","slug":"/docs/plugins/fields/toggle","title":"Toggle"},{"id":"/docs/plugins/fields/select","slug":"/docs/plugins/fields/select","title":"Select"},{"id":"/docs/plugins/fields/tags","slug":"/docs/plugins/fields/tags","title":"Tags"},{"id":"/docs/plugins/fields/list","slug":"/docs/plugins/fields/list","title":"List"},{"id":"/docs/plugins/fields/group","slug":"/docs/plugins/fields/group","title":"Group"},{"id":"/docs/plugins/fields/group-list","slug":"/docs/plugins/fields/group-list","title":"Group List"},{"id":"/docs/plugins/fields/blocks","slug":"/docs/plugins/fields/blocks","title":"Blocks"},{"id":"/docs/plugins/fields/date","slug":"/docs/plugins/fields/date","title":"Date & Time"},{"id":"/docs/plugins/fields/markdown","slug":"/docs/plugins/fields/markdown","title":"Markdown"},{"id":"/docs/plugins/fields/html","slug":"/docs/plugins/fields/html","title":"HTML"},{"id":"/docs/plugins/fields/custom-fields","slug":"/docs/plugins/fields/custom-fields","title":"Custom Fields"}]},{"title":"Content Creators","id":"content-creator","slug":"/docs/plugins/content-creators"},{"title":"Screens","id":"screens","slug":"/docs/plugins/screens"},{"title":"Toolbar Widgets","id":"toolbar:widget","slug":"/docs/plugins/toolbar-widgets"}]},{"id":"events","title":"Events","items":[{"id":"/docs/events","slug":"/docs/events","title":"About Events"}]},{"title":"Media","id":"media","items":[{"id":"/docs/media","slug":"/docs/media","title":"About Media"}]},{"id":"apis","title":"External APIs","items":[{"id":"/docs/api","slug":"/docs/apis","title":"About APIs"}]},{"title":"Integrations","id":"nextjs","items":[{"id":"/docs/integrations/nextjs","slug":"/docs/integrations/nextjs","title":"Next.js"},{"id":"/docs/integrations/gatsby","slug":"/docs/integrations/gatsby","title":"Gatsby"}]},{"title":"Release Notes","id":"releases","items":[{"id":"/docs/releases","href":"/docs/releases","title":"All Releases"}]},{"title":"Packages","id":"packages","items":[{"id":"/packages/react-tinacms-date","slug":"/packages/react-tinacms-date","title":"react-tinacms-date"},{"id":"/packages/react-tinacms-editor","slug":"/packages/react-tinacms-editor","title":"react-tinacms-editor"},{"id":"/packages/react-tinacms-github","slug":"/packages/react-tinacms-github","title":"react-tinacms-github"},{"id":"/packages/react-tinacms-inline","slug":"/packages/react-tinacms-inline","title":"react-tinacms-inline"},{"id":"/packages/react-tinacms-strapi","slug":"/packages/react-tinacms-strapi","title":"react-tinacms-strapi"},{"id":"/packages/next-tinacms-github","slug":"/packages/next-tinacms-github","title":"next-tinacms-github"},{"id":"/packages/next-tinacms-json","slug":"/packages/next-tinacms-json","title":"next-tinacms-json"},{"id":"/packages/next-tinacms-markdown","slug":"/packages/next-tinacms-markdown","title":"next-tinacms-markdown"},{"id":"/packages/gatsby-plugin-tinacms","slug":"/packages/gatsby-plugin-tinacms","title":"gatsby-plugin-tinacms"},{"id":"/packages/gatsby-tinacms-git","slug":"/packages/gatsby-tinacms-git","title":"gatsby-tinacms-git"},{"id":"/packages/gatsby-tinacms-json","slug":"/packages/gatsby-tinacms-json","title":"gatsby-tinacms-json"},{"id":"/packages/gatsby-tinacms-remark","slug":"/packages/gatsby-tinacms-remark","title":"gatsby-tinacms-remark"}]}],"nextPage":{"slug":"/docs/ui/inline-editing","title":"Inline Editing"},"prevPage":{"slug":null,"title":null}},"__N_SSG":true}