import { Meta } from '@storybook/addon-docs';

<Meta title="Introduction" />

# What is Kitsu UI?

Kitsu UI is a collection of core components and layouts for building features quickly and
consistently in the Kitsu web app. It has guides to help you get started, as well as detailed
information about each component.

## Goals

- Improve consistency across Kitsu's web app
- Enable faster design and development
- Make it easy for new contributors to get started

# Structure

## Components

Components are the basic building blocks of the app, ranging from simple things like buttons or
inputs, as well as more advanced things which may combine multiple sub-components. In [Atomic
Design][atomic-design] parlance, these would cover [Atoms][atoms], [Molecules][molecules], and
[Organisms][organisms].

[atomic-design]: https://bradfrost.com/blog/post/atomic-web-design/
[atoms]: https://bradfrost.com/blog/post/atomic-web-design/#atoms
[molecules]: https://bradfrost.com/blog/post/atomic-web-design/#molecules
[organisms]: https://bradfrost.com/blog/post/atomic-web-design/#organisms

## Layouts

Layouts are reusable components for common page structures. In Atomic Design parlance, these cover
[Templates][templates]. An example of this would be the common "cover image layout" used for
profiles, groups, and media pages.

[templates]: https://bradfrost.com/blog/post/atomic-web-design/#templates

## Pages

Pages are the most tangible type of components, since they represent an entire route. In Atomic
Design parlance, these are... [Pages][pages]. Sometimes, like in Atomic Design, these will be
instances of layouts.

[pages]: https://bradfrost.com/blog/post/atomic-web-design/#pages
