← Showcase
homely
A Library for home dashboards
#126e9f#105579#eaf9ff#e9eff6#d0d9e4#aab9c9#7d8990#226094Connect your agent
This design system's MCP server is public, so your agent can list its components, read their specs and stories, and fetch its tokens. No account and no token needed.
https://app.spektral.design/mcp/public/homelyClaude Code
Run this in the project you are building.
claude mcp add --transport http spektral-homely https://app.spektral.design/mcp/public/homelyCursor
Add to .cursor/mcp.json in your project.
{
"mcpServers": {
"spektral-homely": {
"url": "https://app.spektral.design/mcp/public/homely"
}
}
}VS Code
Add to .vscode/mcp.json in your workspace.
{
"servers": {
"spektral-homely": {
"type": "http",
"url": "https://app.spektral.design/mcp/public/homely"
}
}
}Codex
Add to ~/.codex/config.toml.
[mcp_servers.spektral-homely]
url = "https://app.spektral.design/mcp/public/homely"Install the package
Your agent gets this from get_install_instructions too.
curl -fL -o 'ds-lib-1.6.1.tgz' 'https://app.spektral.design/mcp/public/homely/artifacts/8a8b2a972962b87688e8992454433cd53d1a76017642e65e08d761ee14b440ac' && npm install './ds-lib-1.6.1.tgz'Components
- ActivityCardA dashboard update card with optional activity metadata, imagery, progress, and actions.
- ActivityCardsA compact semantic list of activity updates.
- AlertCompact in-page status message with optional title, detail, action, and dismissal.
- AvatarCircular identity image with photo, initials, and generic person fallback.
- AvatarGroupCompact, labeled composition of multiple Avatar identities.
- ButtonThemeable native action button with compact variants, icon placements, and progress state.
- CalendarPage-level date selection and event scheduling calendar with month, week, day, and year views.
- ChartThemeable Chart.js visualization for grouped bar, line, area, pie, doughnut, and scatter data.
- ChatAccessible single-agent conversation log with message bubbles and working feedback.
- ChatComposerChat entry form for text, with optional file, image and voice-note attachments.
- ChatHistorySearchable list of previous chats with controlled or uncontrolled selection.
- ChatMessageNamed agent or user message with optional attachments and rich reply content.
- CheckboxThemeable native checkbox with a clickable text label and associated help or error message.
- ClockLive, viewer-local time display with oversized digital typography and an optional analog face.
- DeviceSingle-device dashboard tile with icon, room, status, setting and capability-specific control.
- DialogModal confirmation surface with a flexible content area and cancel/primary actions.
- FormLabelNative, themeable label for one form control with compact annotations and validation-state appearance.
- HeadingSemantic section heading with a visual size independent of document outline level.
- IconNon-interactive, themeable wrapper for any Lucide React icon.
- InputCompact, themeable native single-line input with optional adornments and validation or progress appearance.
- MediaSingle URL-backed image, video, or embedded frame with an optional visible caption.
- SelectSearchable, creatable single- or multi-value combobox for rich and asynchronously loaded choices.
- SideNavigationCollapsible vertical navigation landmark for home dashboard pages.
- SideNavigationItemA named page link with optional icon and badge for a vertical navigation rail.
- SliderNumeric slider with a continuous line and no tick marks for a single value or bounded two-thumb interval.
- SpinnerCompact activity indicator for unknown-duration loading or known percentage progress.
- TabsTop-aligned scrollable tablist and associated panels with optional add and close actions.
- TextStandalone, naturally wrapping body copy in a compact three-size scale.
- TextareaCompact themeable multiline text entry with optional character count and configurable Enter submission.
- ToastTemporary status notification with automatic or manual dismissal.
- ToastViewportFixed bottom-right stacking container for Toast notifications.
- ToggleCompact switch-style setting control with immediate changes and associated error messaging.
- TooltipCompact plain-text explanation attached to an existing button or icon button.
- WeatherForecastItemCompact reusable hourly or daily weather forecast row.
- WeatherWidgetCompact weather tile with current conditions and expandable forecast details.
- EchoAgentChatPageRecipeFull-screen single-agent chat workspace composed from reusable design-system chat components.
- HomeDashboardRecipeWall-oriented household dashboard showcasing weather, scheduling, and home updates.