UI showcase

Shared components from src/components/ui. Not linked from the dashboard — reach it directly at /ui.

GradientButtonGroup

IllustrationGraph

IllustrationCardGrid

GatewayEndpoint

Your appSDK / fetchQ APIRouter/v1/chatProvidersfallback ↓Authorization: qgw_…healthy

HaloButton

Default (translucent)

Loading state (async)

Guard the click while loading, then clear after your mutation (here MOCK_LOADING_MS).

Loading

isLoading shows loadingText and disables the control.

Non-string children

Stagger applies only when the label is a string.

CopyButton

npm install @radix-ui/react-slot
https://github.com/vercel/next.js

BackgroundImageTexture

Texture Controls
Select a texture variant and adjust the opacity
Preview with Content
See how the texture looks with content on top

Texture Background

This content sits on top of the texture layer. Adjust the opacity slider to see how the texture affects the background. The texture is fully interactive and customizable.

Feature 1

Content with texture background

Feature 2

More content examples

All Texture Variants

fabric of squares

fabric-of-squares

Opacity: 0.5

grid noise

grid-noise

Opacity: 0.5

inflicted

inflicted

Opacity: 0.5

debut light

debut-light

Opacity: 0.5

groovepaper

groovepaper

Opacity: 0.5

Opacity Variations

Opacity: 0.2

grid-noise texture

Opacity: 0.2

Opacity: 0.5

grid-noise texture

Opacity: 0.5

Opacity: 0.8

grid-noise texture

Opacity: 0.8

Use Case Examples

Card with Texture

Beautiful Card

Cards look great with subtle texture backgrounds

Hero Section

Hero Title

Perfect for hero sections and banners

HaloCard

Composable card

Header, content, and footer slots share the same gradient rim and frosted surface as the polished search field. Footer actions use HaloCardButton so labels stay high-contrast in dark mode.

Use HaloCardContent for the main body between the header and footer. Tab through the header action or footer buttons to see focus-within on the rim.

  • HaloCardHeader — title, description, optional action
  • HaloCardFooter — primary actions aligned to the end

Minimal layout

Title and description only — no content slot or footer. Same rim and hover behavior.

GifLoader

128px — boot gate

64px — panel loading

32px — inline