ajo

Ecosystem

The Playa theme

Themed components and a build-time UnoCSS preset.

Add components and the preset

Playa combines component families with design tokens, icons and UnoCSS recipes. Its UnoCSS peer is exact: use 66.7.2.

Terminal
pnpm add ajo-ui-playa@0.1.2
pnpm add -D unocss@66.7.2

Enable Playa at build time

Import playa() from the package root. Keep application shortcuts and dynamic icon safelists in your own config.

uno.config.ts
import { defineConfig } from 'unocss'
import { playa } from 'ajo-ui-playa'

export default defineConfig({ presets: [playa()] })

Load styles before hydration

Add the UnoCSS plugin, then import virtual:uno.css from the root layout. This makes the same stylesheet available during local development and the production build. Imported Playa families carry the UnoCSS discovery marker.

vite.config.ts
import { defineConfig } from 'vite'
import { kit } from 'ajo-kit/vite'
import unocss from 'unocss/vite'

export default defineConfig({
  plugins: [...kit(), unocss()],
  optimizeDeps: { exclude: ['ajo-kit/client'] },
})

Import the stylesheet

The root layout owns the generated CSS. Put your own application stylesheet after it if you want to customize the theme.

src/layout.tsx
import 'virtual:uno.css'
import type { LayoutArgs } from 'ajo-kit'

export default ({ children }: LayoutArgs) => children

Import an explicit family

Runtime components use subpaths. A Button can render a real anchor so navigation keeps native link semantics. This website uses Playa for its actions.

ReadDocs.tsx
import Button from 'ajo-ui-playa/button'

export default () => (
  <Button as="a" href="/docs" variant="outline">
    Read the docs
  </Button>
)
Keep exploringFull reference on GitHub All guides