Components

Button

components/common/Button.astro

Button or link with variant (primary, ghost, outline) and size (md, icon). Passing href renders an anchor.

As link

Badge

components/common/Badge.astro

Small status pill. Variants: neutral, accent, outline.

Neutral Accent Outline

Avatar

components/common/Avatar.astro

Initials or image avatar in sm, md and lg sizes; circle makes it round.

Icon

components/common/Icon.astro

Mask-based SVG icons that inherit currentColor. Use <Icon name="…" size={20} />.

plus

search

image

web

menu

chevron

close

paperclip

arrowUp

cross

copy

refresh

edit

delete

thumbUp

thumbDown

settings

data

about

desktop

sun

moon

user

palette

sliders

sparkles

help

logout

logo

sidebar

imagegenerated

personal

apps

code

plugins

files

more

codex

thinking

audio

mic

pause

gift

privateMessage

bookLibrary

clock

Spinner

components/common/Spinner.astro

Loading indicator in sm, md and lg.

Shimmer

components/common/Shimmer.astro · styles/global.css (@utility shimmer)

Text with a sweeping highlight for loading or generating states. The highlight comes from currentColor, so it follows the text colour and theme. Use the component, or the utilities directly: shimmer, shimmer-duration-<ms>, shimmer-spread-<n>, shimmer-angle-<deg>, shimmer-color-<color>, shimmer-reverse, shimmer-once, shimmer-none.

Default

Generating response…

Utility classes

Thinking…

Duration

Fast · 900ms

Slow · 4000ms

Angle and spread

Tilted 45°

Wide highlight

Colour

Accent highlight

Pink highlight

Reverse and once

Sweeping the other way

Plays a single sweep (reload to replay)

On headings and with a status icon

Analyzing your files

Searching the web…

Tooltip

components/common/Tooltip.astro

CSS-only tooltip on hover or keyboard focus. Twelve positions; hover the buttons.

Dropdown

components/common/Dropdown.astro

Headless menu with a trigger slot; it flips to stay inside the viewport and follows text direction.

Tabs

components/common/Tabs.astro

Accessible tab group with pill and underline variants. Panels are slotted by id.

Panel one

Overview content

Modal

components/common/Modal.astro

Dialog shell opened by any element with data-modal-open="<id>".

Sidebar button

styles/components.css · .sidebar-button

Navigation row used in the sidebar, with default and active states.

Messages

components/chat/UserMessage.astro · AssistantMessage.astro

Chat bubbles for both roles, including the hover action row.

How do I reverse a string in JavaScript?

Split it into characters, reverse the array, then join it back.

Code block

components/chat/CodeBlock.astro

Code snippet with a language label, copy actions and a scrollable body.

JavaScript

const reverse = (s) => [...s].reverse().join('');
console.log(reverse('hello'));

Chat input

components/chat/ChatInput.astro

Composer with auto-growing textarea, attachments, mic and voice buttons. noSend keeps it display-only.

Plugin card

components/plugins/PluginCard.astro

Logo, name and description with an add or options action.

Example plugin Not installed yet

Installed plugin Already added