Showcase / host composition

Perplexity skin.

perplexity.tsx: wordmark empty state, tall search composer, Search mode chip, narrow thread. Wrap with au-skin-perplexity.

perplexity.tsxau-skin-perplexityhost-chrome

au-skin-perplexity / emptywelcome

perplexity

au-skin-perplexity / messagesconversation

Summarize the trade-offs briefly.

Keep the host thin: tokens for skin, primitives for structure, host for runtime.

1 / 2

Install

<link rel="stylesheet" href="tokens.css">
<link rel="stylesheet" href="themes.css">
<link rel="stylesheet" href="components/button/button.css">
<link rel="stylesheet" href="components/chat-thread/chat-thread.css">
<link rel="stylesheet" href="components/chat-message/chat-message.css">
<link rel="stylesheet" href="components/chat-input/chat-input.css">
<link rel="stylesheet" href="components/chat-input/chat-input-features.css">
<link rel="stylesheet" href="host-chrome.css">
<link rel="stylesheet" href="host-skins.css">