Vibe Design System

The NumberField component is an accessible, strictly numeric input that includes vertical stepper controls (increment/decrement buttons). It is designed for controlled usage where you manage the state via value and onChange props. You can enforce boundaries using min, max, and step props, and provide visual feedback using error or success states combined with infoText.

import { NumberField } from "@vibe/core";

// Example of controlled usage
<NumberField 
  value={25} 
  onChange={(newValue) => console.log(newValue)} 
  label="Age" 
  min={0} 
  max={120} 
/>

The ColorDescription component is used to display a color description. It is a composite component that combines the VisualDescription component with a colored square to provide both a visual representation of a color and its textual description.

import { ColorDescription } from '@vibe/core'; // Note: Import path based on package structure

The InformationBox component is a UI element used to display information to users. It supports providing a title, a description, a specific component to render within the box, and an optional link.

import { InformationBox } from '@vibe/core'; // Note: Import path based on package structure

<InformationBox 
  title="Information Title" 
  description="This is a description of the information contained in the box."
  link="https://example.com"
/>

The TokenTable component is a specialized UI component designed to display token values in a structured table format with rows and columns. It is typically used within Storybook to document and visualize design tokens.

// Example usage context within Storybook
import * as TokenTable from './token-table.stories';

<Canvas of={TokenTable.Overview} />

Vibe includes a Model Context Protocol (MCP) server designed to provide intelligent assistance for developers using AI development tools. It helps with:

• Discovering component APIs
• Retrieving usage examples
• Finding appropriate icons
• Following design best practices

To use it, follow the installation instructions in the @vibe/mcp package documentation to integrate it with your preferred AI tool.