Preview
What can I help you ship today?
- 2:14 PMCan you help me write a follow-up email after a customer call?
- 2:15 PMOf course. Here is a short follow-up: Hi {{name}}, Thanks for taking the time today. To summarize what we discussed: • You're scaling from 12 to 35 engineers in Q3 • The main blocker is consistent component theming • Timeline is "live in staging within 8 weeks" Next step on my side: I'll send you a 1-page proposal by Friday. Let me know if anything in the recap is off. Best, {{your name}}
- 2:16 PMMake it 30% shorter and slightly more casual.
- 2:16 PMHi {{name}} — thanks for the chat today! Quick recap: scaling 12 → 35 in Q3, theming is the bottleneck, you want live-in-staging in 8 weeks. I'll send a 1-pager by Friday. Holler if I got anything wrong. Thanks, {{your name}}
Try me — type anything below
Installation
Install the runtime packages:
pnpm add @oshon-ai/components @oshon-ai/tokens @oshon-ai/primitives
Or scaffold the component source directly into your codebase (shadcn-style):
pnpm dlx @oshon-ai/cli add aichatweb
Wire the tokens into your Tailwind v4 stylesheet:
/* app/globals.css */ @import 'tailwindcss'; @import '@oshon-ai/tokens/css'; @import '@oshon-ai/tokens/tailwind';
New here? Walk through the full setup — prereqs, theming, your first render.
Usage
Import the component and render it. Every component supports the standard tier, size, and disabled props where applicable.
'use client';
import { AIChatWeb } from '@oshon-ai/components';
export default function Example() {
return <AIChatWeb />;
}Styling
Three layers of customization, in order of escape-hatch strength: className overrides → data-attribute targeting → CSS custom properties.
Passing Tailwind classes
Every Oshon component accepts a className prop merged AFTER the component's default classes. Use it to override spacing, color, or size without forking the component.
<AIChatWeb className="ring-2 ring-offset-2 ring-blue-500" />
Data attributes
Oshon components expose their internal state as data-oshon-* attributes so you can target them from CSS without coupling to internal class names. The most common attributes are listed below — see the component's source for the full set.
| Attribute | Values | Description |
|---|---|---|
data-oshon-size | xs · s · m · l · mobile | Visual size axis. Mirrors the `size` prop. |
data-oshon-tier | primary · secondary · tertiary | Visual emphasis tier (Button family). Mirrors the `tier` prop. |
data-oshon-state | enabled · active · error · disabled | Component surface state. Set automatically based on props. |
data-disabled | true · (omitted) | Set when `disabled` is true. Pair with `:disabled` CSS for native input components. |
data-state | open · closed · checked · unchecked · … | Radix-derived state for overlay components (Dialog, Tabs, Toggle, etc.). |
/* Target the secondary tier specifically */
[data-oshon-tier="secondary"] {
--oshon-color-primary-700: var(--my-brand-color);
}Interactive states
Every interactive component supports the standard CSS pseudo- classes plus Tailwind's state variants. Focus rings always use :focus-visible so keyboard users see them but mouse users don't.
:hover/hover:*— pointer hover:focus-visible/focus-visible:*— keyboard focus:active/active:*— pressed:disabled/disabled:*— set via thedisabledprop