# Now playing

Grow a mini player into the full player in one continuous morph.

- ID: `now-playing`
- Import: `animui/now-playing`
- Category: Special
- Runtime exports: `NowPlaying`, `NowPlayingLevels`
- Declaration: `types/pro/now-playing.d.ts`
- Type provenance: reconstructed-from-docs-and-runtime
- Related: bottom-sheet, cover-flow, slider, voice-recorder

```tsx
import { NowPlaying } from 'animui/now-playing';
```

This import example is not a complete render recipe: read the declaration below and its local references for required props, data, callbacks and provider context. Use `animui info now-playing` to resolve the local declaration graph. Global setup is in `llms.txt`.

```ts
/** Reconstructed from saved Arc documentation and runtime binding evidence; original TypeScript source was unavailable. */
import type { ComponentType, ReactNode, CSSProperties, Ref, ButtonHTMLAttributes, HTMLAttributes, ReactElement } from 'react';

export interface NowPlayingProps {
  tracks: { id: string; title: string; artist: string; duration: number; artwork: string; artworkAlt?: string }[];
  index?: number;
  defaultIndex?: number;
  onIndexChange?: (index: number) => void;
  playing?: boolean;
  defaultPlaying?: boolean;
  onPlayingChange?: (playing: boolean) => void;
  defaultExpanded?: boolean;
  label?: string;
  className?: string;
}

export interface NowPlayingLevelsProps {
  playing: boolean;
  className?: string;
}

export declare const NowPlaying: ComponentType<NowPlayingProps>;
export declare const NowPlayingLevels: ComponentType<NowPlayingLevelsProps>;

export default NowPlaying;
```