Nuri

01Preview

Pick an expression and a size, and turn on speaking. Changing the expression plays a small squash and settle; the box stays the same size, so the layout never jumps.

import { Nuri } from '@nuton/ui'

<Nuri emotion="happy" size={128} />

02Installation

pnpm add @nuton/ui @nuton/tokens @remixicon/react

npm install @nuton/ui @nuton/tokens @remixicon/react

yarn add @nuton/ui @nuton/tokens @remixicon/react

import '@nuton/tokens/tokens.css'
import '@nuton/ui/styles.css'

03Usage

import { Nuri } from '@nuton/ui'

<Nuri emotion="encouraging" size={64} />

// Each new correct answer gets its own sparkle, even if Nuri is already happy.
<Nuri emotion="happy" replayKey={answer.id} />

<Nuri emotion="thinking" decorative />
<p>Nuri is working on your answer…</p>

• Choose the expression for what the tutor is doing, not for decoration. The table in Variants lists a suggested use for each.
• Keep it beside the words it reacts to. Nuri adds feeling; the message still has to say everything on its own.
• Use decorative when the text next to Nuri already says how it feels, so screen readers do not hear it twice.
• Accents mark a moment. Pass a new replayKey when the moment happens again (another right answer); don't replay on a timer.
• Turn on speaking only while the tutor's reply is arriving, and turn it off when the text is complete.
• Pass animated={false} where many Nuris sit together, such as a history list, so only the current one moves.
• Show Nuri on a light or mid surface. The artwork keeps its own colours in dark mode.

04Variants and sizes

Thirteen expressions and six sizes. The drawings come from the Figma pack and are not changed in code.

Expressions

The uses above are suggestions. The Figma pack names the expressions but does not say when to use them (C79). The accents are code-drawn, not from the pack (C81).

Sizes

<Nuri size={32} />
<Nuri size={48} />
<Nuri size={64} />
<Nuri size={96} />
<Nuri size={128} />
<Nuri size={160} />

Width follows height at 343 : 409. Below 32 the face stops reading, so there is no smaller size.

05States and interactions

Nuri moves its own Figma layers: the drawing is never redrawn or swapped mid-motion. Every movement is small and slow, so it reads as alive without pulling the eye from the lesson.

06Composition examples

In the AI Tutor: attentive Nuri

useNuriAttention makes Nuri pay attention to the learner. Put Nuri where it is always in view (here, above the composer; in the welcome before the first question) and tell the hook what the tutor is doing.

import { ChatPanel, ChatComposer, Nuri, useNuriAttention } from '@nuton/ui'

const panel = useRef<HTMLElement>(null)
// 'thinking' while the reply is generated, 'responding' when it appears, then 'idle'.
const nuri = useNuriAttention({ area: panel, state: tutorState })

<ChatPanel ref={panel} footer={<><Nuri ref={nuri} emotion={emotion} size={64} decorative /><ChatComposer … /></>}>
  …
</ChatPanel>

Empty chat

<Nuri emotion="curious" size={96} />
<p>Ask me anything about this lesson.</p>

Feedback after an answer

<Nuri emotion="encouraging" size={64} decorative />
<p>Not quite. Look at the second step again.</p>

07API reference

Props

useNuriAttention

It returns a ref for <Nuri ref={…} />. It never re-renders the app: it writes three CSS variables on Nuri and runs its frame loop only while the eyes are moving. It does nothing with reduced motion or when Nuri is not animated.

Other span attributes (className, style, data-*) are passed through. role is set by the component.

Accessibility

You must: translate label when the interface is not in English, use decorative when the text beside Nuri already says how it feels, and turn speaking off when the reply is complete.

Figma mapping

08Guidelines and related components

Do and don't

Related components

• ChatThe AI tutor panel where Nuri appears.
• Empty statePair Nuri with a short message and one action.
• AvatarFor people, not the tutor.