We are working on documenting visual design and I wanted to know: what is the main difference between a UI KIT and a styleguide?
Is the difference between them that the styleguide includes design guidelines and best practices and the UI KIT is just showing the different components and their behaviors?
Or are both just 2 ways of documenting the same thing but with different names?
Does the difference in between them lies in that the styleguide includes design guidelines and best practices and the UI KIT is just showing the different components and their behaviors?
Pretty much so.
A UI kit is a collection of components, either interactive (javascript) or static (photoshop), from which a user interface can be composed. Balsamiq provides a UI Kit.
Style guides may, but not necessary refer to a specific UI Kit (ie, an implementation). They may include advice ("do not rely on double-click as these are not intuitive on mobile"), guidelines on composition, white space, colour scheme, etc.
To give one example, Material Design is a style guide, whereas material-ui is a UI Kit that adheres to the guide.
On the other hand, Apple's iOS Design Guidelines make specific references to Apple's own UI kit.
Terminology trap - Mind you, the word style with relation to UI often describes the presentation layer only, and deals less with interaction. To some "Users can swipe the switch" will not constitute a style-guide, but rather a design-guideline.
