<script setup lang="ts">
import Layout from '../src/components/ui/Layout.vue'
import Card from '../src/components/ui/Card.vue'
import Spacer from '../src/components/ui/layout/Spacer.vue'
</script>

# Funkwhale design component library

## Plan

<Layout flex>

<Card to="designing-pages"
    title="Designing pages"
    style="width:min-content"
  />

<Card to="https://design.funkwhale.audio"
      title="Ui designs" style="width:max-content">
Check out the design system on our Penpot.
</Card>

</Layout>

## Use

<Layout flex>

<Card to='/using-components'
  title="Using components"
  style="width:min-content"
  />

<Card to="/using-color"
  title="Using color"
  style="width:min-content"
  />

<Card to="/using-width"
  title="Using width"
  style="width:min-content"
  />

<Card to="/using-alignment"
  title="Using alignment"
  style="width:min-content"
  />

</Layout>

## Contribute

- [Improve the component library](./contributing)
- [Found a bug? Report it here](https://dev.funkwhale.audio/funkwhale/funkwhale/-/issues/?sort=created_date&state=opened&label_name%5B%5D=Type%3A%3AUX%2FUI&first_page_size=20)
