Ooko
Playground

First steps ​

This guide follows the shortest path from an installed package to a customized, accessible interface.

1. Render a component ​

After registering the complete plugin, use a component directly in a template:

vue
<template>
  <OButton>Save changes</OButton>
</template>

2. Prefer individual imports when bundle size matters ​

Import a component from its public subpath instead of registering the complete plugin:

vue
<script setup lang="ts">
import { OAlert } from "ooko-ui/alert";
</script>

<template>
  <OAlert color="success" title="Saved">Your changes are live.</OAlert>
</template>

Keep the global stylesheet import in the application entry in both modes.

3. Use controlled state ​

Form controls use Vue's standard v-model contract. The application owns the value:

vue
<script setup lang="ts">
import { ref } from "vue";

import { OInput } from "ooko-ui/input";

const email = ref("");
</script>

<template>
  <OInput v-model="email" label="Email" type="email" />
</template>

4. Configure shared defaults ​

Set a small whitelist of visual defaults while registering the plugin. Direct component props always take precedence:

ts
app.use(Ooko, {
  defaultProps: {
    OButton: { color: "secondary", size: "sm" },
    OInput: { size: "sm" },
  },
});

See App default props for the supported values.

5. Customize the design ​

Load one plain CSS file after ooko-ui/style.css, then override documented tokens. Start with the CSS tokens guide.

6. Choose the next component ​

Each component page uses the same path: a minimal import, guided steps, a live props playground, then complete API, accessibility, and edge-case references.