Ditto automatically generates levels of organization based on components named under a forward-slash naming convention. Similar to projects, the component library supports 3 levels of organization; which will display as groups and blocks in the component library.
To get started, go ahead and name one of your components using a forward-slash naming convention. Don't worry, renaming and organizing your components doesn't affect how they're attached in projects!
A brief cheatsheet:
Here are some examples of component names, and what their resulting component library organizations are:
onboarding/newUser/success → "success" component in the "newUser" block in the "onboarding" group
Note that the component name on the right-hand side will always show the full component name, whether you're in the component library or working out of a project!
You can also use our drag-and-drop interface to drag components between groups or between blocks, which will automatically adjust the component names accordingly.
Groups, blocks, and components are all displayed alphabetically in the component library, and you can use the Navigation to click to scroll to any component in the library. Components named without a forward slash are not nested in any group and are displayed at the bottom of the library.