docs/routes/index.md

---
title: Introduction
---

## What is Omorphia?

Omorphia is Modrinth's style and reusable component library for use in all of its frontend applications, including [knossos](https://github.com/modrinth/knossos) (modrinth.com), [theseus](https://github.com/modrinth/theseus) (launcher), and planned projects such as Modrinth's in-house auth and ad-server.

It uses [Svelte](https://svelte.dev/) to deliver the best performance with the least boilerplate.

## Getting started

Adding Omorphia to your project is as easy as:

```bash
pnpm add omorphia
```

### Components

Use a component by importing from `omorphia`. For example, use the [Button component](/components/Button) like so:

```svelte example raised
<script lang="ts">
	import { Button } from 'omorphia'
</script>

<Button color="primary">I'm a button!</Button>
```

For more information on each component, check out the pages on the sidebar navigation.

> To get Svelte language support in your code editor, [use this list of extensions.](https://sveltesociety.dev/tools#editor-support)

### Using icons and styles

Follow the guides on the sidebar to learn how to use [icons](/getting-started/icons) and general concepts.
docs: Improve header + sidebar docs: Create workflows lib: Start pagination 2022-03-12 01:34:09 -08:00			`---`
			`title: Introduction`
			`---`
Add CSS & Icons docs 2022-03-09 23:17:28 -08:00
docs: Improve header + sidebar docs: Create workflows lib: Start pagination 2022-03-12 01:34:09 -08:00			`## What is Omorphia?`
Improve docs 2022-03-09 22:18:22 -08:00
docs: Improve header + sidebar docs: Create workflows lib: Start pagination 2022-03-12 01:34:09 -08:00			`Omorphia is Modrinth's style and reusable component library for use in all of its frontend applications, including [knossos](https://github.com/modrinth/knossos) (modrinth.com), [theseus](https://github.com/modrinth/theseus) (launcher), and planned projects such as Modrinth's in-house auth and ad-server.`
docs: Improve theming + introduction 2022-03-10 00:08:59 -08:00
			`It uses [Svelte](https://svelte.dev/) to deliver the best performance with the least boilerplate.`

docs: Improve header + sidebar docs: Create workflows lib: Start pagination 2022-03-12 01:34:09 -08:00			`## Getting started`
docs: Improve theming + introduction 2022-03-10 00:08:59 -08:00
docs: Improve header + sidebar docs: Create workflows lib: Start pagination 2022-03-12 01:34:09 -08:00			`Adding Omorphia to your project is as easy as:`
docs: Improve theming + introduction 2022-03-10 00:08:59 -08:00
			```bash
docs: Improve header + sidebar docs: Create workflows lib: Start pagination 2022-03-12 01:34:09 -08:00			`pnpm add omorphia`
docs: Improve theming + introduction 2022-03-10 00:08:59 -08:00			```

docs: Improve header + sidebar docs: Create workflows lib: Start pagination 2022-03-12 01:34:09 -08:00			`### Components`
docs: Improve theming + introduction 2022-03-10 00:08:59 -08:00
Update docs examples + Add Select component + Add Card, Base, Title classes 2022-03-29 00:44:23 -07:00			Use a component by importing from `omorphia`. For example, use the [Button component](/components/Button) like so:
docs: Improve theming + introduction 2022-03-10 00:08:59 -08:00
Update illustrations & icons docs + Fixes 2022-05-07 17:22:33 -07:00			```svelte example raised
Update docs examples + Add Select component + Add Card, Base, Title classes 2022-03-29 00:44:23 -07:00			`<script lang="ts">`
Run prettier 2022-06-04 00:46:23 -07:00			`import { Button } from 'omorphia'`
Update docs examples + Add Select component + Add Card, Base, Title classes 2022-03-29 00:44:23 -07:00			`</script>`
docs: Improve theming + introduction 2022-03-10 00:08:59 -08:00
Update docs examples + Add Select component + Add Card, Base, Title classes 2022-03-29 00:44:23 -07:00			`<Button color="primary">I'm a button!</Button>`
docs: Improve theming + introduction 2022-03-10 00:08:59 -08:00			```

			`For more information on each component, check out the pages on the sidebar navigation.`

docs: Improve header + sidebar docs: Create workflows lib: Start pagination 2022-03-12 01:34:09 -08:00			`> To get Svelte language support in your code editor, [use this list of extensions.](https://sveltesociety.dev/tools#editor-support)`
docs: Improve theming + introduction 2022-03-10 00:08:59 -08:00
docs: Improve header + sidebar docs: Create workflows lib: Start pagination 2022-03-12 01:34:09 -08:00			`### Using icons and styles`
docs: Improve theming + introduction 2022-03-10 00:08:59 -08:00
Run `pnpm format` 2022-05-20 00:10:45 -07:00			`Follow the guides on the sidebar to learn how to use [icons](/getting-started/icons) and general concepts.`