@annondeveloper/ui-kit

Name: @annondeveloper/ui-kit
Author: annondeveloper

web MCP Server

Zero-dependency React component library with 147 components, 3 weight tiers (Lite/Standard/Premium), physics-based animations, OKLCH color system, Aurora Fluid design, and built-in MCP server for AI assistants

byannondeveloper

VerifiedInstall Ready

webweb

3 views0 stars2 forksv2.9.0MIT

View on GitHub Homepage Docs

Why This Matters

Discovered via github-topic:mcp and last synced 3mo ago.

VerifiedInstall Ready

Source: github-topic:mcp
Stars: 0
Last synced: 3mo ago
Install: Instructions detected

Install

1. Install the package

npx @annondeveloper/ui-kit mcp

2. Add to claude_desktop_config.json

{
  "mcpServers": {
    "annondeveloper-ui-kit": {
      "command": "npx",
      "args": [
        "@annondeveloper/ui-kit",
        "mcp"
      ]
    }
  }
}

Config file location: ~/Library/Application Support/Claude/claude_desktop_config.json (macOS) / %APPDATA%\Claude\claude_desktop_config.json (Windows)

309

Tools

Resources

Prompts

Standard I/O

Transport

Available Tools (309)

search_components

Semantic search across components by use case (e.g., "data visualization", "form inputs")

Accordion

Collapsible sections with single/multiple mode

Tool

What it does

generate_snippet

Generate working TSX code with correct imports for any component combination

get_page_template

Full page scaffolds: dashboard, settings, list, detail, empty, auth, landing

Avatar

Image/initials avatar with status dot

list_components

Browse all 159 components with descriptions, filterable by category or tier

Component

Description

BackToTop

Scroll-to-top floating button

Chip

Compact interactive tag element

Divider

Horizontal/vertical separator

InlineEdit

Click-to-edit text field

Pagination

Page navigation with controls

SegmentedControl

Segmented toggle selector

StatusPulse

Animated status dot with pulse ring

Typography

Semantic text with fluid sizing

ConnectionTestPanel

Step-by-step connectivity test UI

DiffViewer

Side-by-side/inline diff viewer

HeroHighlight

Gradient text highlight effect

NumberTicker

Rolling digit counter

RingChart

SVG donut chart with center label

StepWizard

Multi-step form wizard

Timeline

Vertical event timeline

UptimeTracker

Daily uptime bar strip

Lite

144

Prop

Type

onConfirm

`() => void`

trigger

`ReactNode`

tabs

`Tab[]`

title

`string`

hint

`string`

step

`number`

indeterminate

`boolean`

searchPlaceholder

`string`

maxSuggestions

`number`

showLineNumbers

`boolean`

get_theme

Retrieve theme tokens, OKLCH color system details, and customization API

Alert

Inline status messages with variants

get_started

Complete setup guide for new projects — framework-aware (Next.js, Vite, Remix)

AppShell

Full application layout scaffold

Card

Styled container with subcomponents

DatePicker

Calendar-based date selection

FormInput

Themed input with label and validation

onSearch

`(query) => Promise<CommandItem[]>`

endDate

`string`

get_component

Get full API reference for any component — props, types, defaults, code examples, design guide

ActionIcon

Icon-only button with tooltip

Badge

Pill-shaped label with color presets

ColorInput

Color picker with hue/saturation panel

Drawer

Slide-out panel from any edge

Kbd

Keyboard shortcut display

PasswordInput

Password field with visibility toggle

Select

Themed dropdown select

Stepper

Step indicator with progress

UIProvider

Theme, motion, and density provider

CopyBlock

Code display with one-click copy

DiskMountBar

Disk mount utilization bars

InfiniteScroll

Virtualized infinite-scroll list

OrbitingCircles

Orbiting icon animation

Ripple

Click ripple effect

StorageBar

Segmented horizontal bar

TimeSeriesChart

Full SVG line chart with multi-series

UtilizationBar

Horizontal bar with threshold colors

Premium

children

`ReactNode`

value

`number`

description

`string`

emptyMessage

`string`

autoComplete

`string`

onDayClick

`(day) => void`

entries

`LogEntry[]`

count

`number`

onRowClick

`(row: T) => void`

fallback

`string`

fillOpacity

`number`

maxHeight

`number`

status

`'online' \

format

`(v: number) => string`

isStreaming

`boolean`

threshold

`number`

get_icons

Browse 50+ built-in SVG icons with search and usage examples

Assistant

Setup

Affix

Fixed-position wrapper for floating elements

AnimatedCounter

Smooth number animation with easing

Calendar

Standalone calendar display

CopyButton

One-click copy to clipboard

FilterPill

Rounded filter toggle with count

NativeTooltip

Lightweight tooltip using title attribute

AvatarUpload

Avatar with upload/crop functionality

Checkbox

Themed checkbox with indeterminate state

Dialog

Native dialog with animated entry/exit

Indicator

Dot/badge indicator overlay

OtpInput

One-time password code entry

Breadcrumbs

Hierarchical navigation trail

Button

Primary action with variants and loading

ButtonGroup

Grouped button container

ConfirmDialog

Confirmation modal with danger variant

FileUpload

Drag-and-drop file upload with preview

Carousel

Image/content carousel with navigation

Combobox

Searchable select with async loading

DropdownMenu

Action menu with submenus and shortcuts

Link

Styled anchor with underline animation

PinInput

PIN code entry with auto-advance

Sheet

Slide-over drawer with swipe dismiss

CommandBar

Universal command palette (Cmd+K)

EmptyState

Decorative placeholder with icon and actions

MultiSelect

Multi-value select dropdown

DateRangePicker

Date range selection with presets

Highlight

Text highlighting with search match

Navbar

Top-level application navigation bar

Progress

Progress bar with indeterminate mode

Skeleton

Shimmer loading placeholder

TagInput

Multi-value input with tag chips

BackgroundBoxes

Floating animated grid boxes

CSVExportButton

One-click CSV generation and download

EvervaultCard

Matrix-style encrypted card

LiveFeed

Real-time event feed with auto-scroll

PropertyList

Key-value detail panel

ShimmerButton

Shimmering gradient button

NotificationStack

Toast notification cards with auto-dismiss

Rating

Star rating input with half-star support

Spoiler

Collapsible content with show more/less

Toast

Pre-themed toast notifications

Card3D

3D perspective tilt with glare

DashboardGrid

Draggable dashboard layout

GeoMap

SVG geographic visualization

MeteorShower

Falling meteor streak animation

NumberInput

Numeric input with increment/decrement

Popover

Anchored popover with arrow and focus management

Sidebar

Collapsible side navigation

Tabs

Tabbed interface with animated indicator

BackgroundBeams

Animated sweeping light beams

RadioGroup

Radio button group with descriptions

Slider

Range slider with keyboard support

ScrollReveal

Scroll-triggered reveal animation

Spotlight

Spotlight search overlay

ToggleSwitch

Boolean toggle switch

CodeEditor

Code editor with syntax highlighting

SearchInput

Search field with debounce and clear

StatusBadge

Status indicator with colored dot

Tooltip

Popover-based tooltip with positioning

ConfidenceBar

Probability bar with threshold zones

SuccessCheckmark

Animated SVG checkmark

CoreChart

CPU core utilization grid

EncryptedText

Matrix-style character scramble/reveal

JsonViewer

Interactive JSON tree viewer

PipelineStage

Horizontal pipeline visualization

SeverityTimeline

Event timeline with severity dots

StreamingText

AI/LLM streaming text with cursor

Tour

Guided product tour with step highlights

Textarea

Auto-growing text area

BorderBeam

Animated conic-gradient border

ColumnVisibilityToggle

Column show/hide dropdown

FlipWords

Rotating word animation

LogViewer

Log stream viewer with severity colors

RackDiagram

Data center rack visualization

SmartTable

DataTable with auto-generated filter suggestions

TextReveal

Scroll-triggered character-by-character unveil

TreeView

Hierarchical tree with expand/collapse

ContainerQuery

Container query wrapper with render-prop size info

Cropper

Image cropping tool

EntityCard

Infrastructure resource card

KanbanColumn

Kanban board column with cards

PortStatusGrid

Network port status indicator grid

ServiceStrip

Horizontal service badge strip

SwitchFaceplate

Network switch port grid

TracingBeam

Scroll-tracing side beam

DataTable

Full-featured data grid with search, sort, filter

GlowCard

Mouse-tracking radial glow card

MetricCard

Dashboard stat tile with sparkline

ResponsiveCard

Container-query adaptive card

Sparkline

Inline SVG sparkline chart

TimePicker

Time selection input

TypingIndicator

"Someone is typing" animation

Tier

Components

size

`number`

padding

`'none' \

onClose

`() => void`

delay

`number`

items

`KanbanItem[]`

required

`boolean`

min

`number`

DensitySelector

Compact/comfortable/spacious control

HeatmapCalendar

GitHub-style contribution heatmap

NetworkTrafficCard

Network throughput display

RichTextEditor

WYSIWYG rich text editor

SpotlightCard

Spotlight hover effect card

TimeRangeSelector

Compact time range pill selector

UpstreamDashboard

Service monitoring layout

Standard

147

loading

`boolean`

side

`'top' \

disabled

`boolean`

max

`number`

showAlpha

`boolean`

emptyState

`ReactNode`

onFilterSuggestion

`(suggestion: FilterSuggestion) => void`

RealtimeValue

Live data display with freshness tracking

SortableList

Drag-and-drop reorderable list

ThresholdGauge

Semicircular gauge with threshold zones

TruncatedText

Auto-truncating text with tooltip

Module

Size

variant

`'default' \

TransferList

Dual-list item transfer

ViewTransitionLink

View Transitions API integration

Metric

Value

color

`string`

width

`string \

onOpenChange

`(open: boolean) => void`

label

`string`

WavyBackground

Animated SVG sine waves

Budget

400 KB

icon

`LucideIcon`

align

`'start' \

enabled

`boolean`

Tree-shaking

Full ESM — import only what you use

content

`string`

open

`boolean`

Alignment

--- #### DropdownMenu Action/context dropdown menu built on Radix DropdownMenu with danger variant support. ```tsx import { DropdownMenu } from '@annondeveloper/ui-kit' import { Edit, Trash2 } from 'lucide-react' <DropdownMenu trigger={<button>Actions</button>} items={[ { label: 'Edit', icon: Edit, onClick: handleEdit }, { label: 'Delete', icon: Trash2, onClick: handleDelete, variant: 'danger' }, ]} /> ```

onChange

`(items: SortableItem[]) => void`

onValueChange

`(v: string) => void`

Type

Default

confirmLabel

`string`

type

`string`

cancelLabel

`string`

options

`RadioOption[]`

presets

`string[]`

showSummary

`boolean`

steps

`WizardStep[]`

active

`boolean`

defaultSort

`{ id, desc }`

showDots

`boolean`

events

`TimelineEvent[]`

onClick

`() => void`

onStepChange

`(step: number) => void`

orientation

`'vertical' \

columns

`number`

allowSkip

`boolean`

density

`'compact' \

defaultPageSize

`number`

exportFilename

`string`

stickyFirstColumn

`boolean`

maxWidth

`string \

oldValue

`string`

newValue

`string`

statusMap

`Record<string, StatusConfig>`

mode

`'inline' \

language

`string`

pulse

`boolean`

configMap

`Record<string, PulseConfig>`

animated

`boolean`

trendDirection

`'up-good' \

showValue

`boolean`

onPortClick

`(port: PortStatus) => void`

sparklineData

`number[]`

onStageClick

`(stage, index) => void`

text

`string`

hotkey

`string`

onItemClick

`(item) => void`

alt

`string`

isLoading

`boolean`

thresholds

`{ low, medium }`

days

`DayStatus[]`

ports

`PortStatus[]`

stages

`StageInfo[]`

autoScroll

`boolean`

staleAfterMs

`number`

onEventClick

`(event) => void`

showTimestamps

`boolean`

connectionState

`'connected' \

onComplete

`() => void`

ranges

`TimeRange[]`

placeholder

`string`

src

`string`

hasMore

`boolean`

data

`DayValue[]`

showLevel

`boolean`

previousValue

`number`

position

`'top-right' \

height

`string \

showDayLabels

`boolean`

onEntryClick

`(entry) => void`

animate

`boolean`

maxVisible

`number`

renderItem

`(item, index) => JSX.Element`

onAddItem

`() => void`

tooltipFormat

`(day) => string`

Various

lastUpdated

opencli-usage

Use when running OpenCLI commands to interact with websites (Bilibili, Twitter, Reddit, Xiaohongshu, etc.), desktop apps (Cursor, Notion), or public APIs (HackerNews, arXiv). Covers installation, command reference, and output formats for 87+ adapters.

5841 starsHas guide

Tavily Web Search

AI-optimized web search via Tavily API. Returns concise, relevant results for AI agents.

381 starsHas guide

ComPDF Conversion CLI

MUST use for ANY PDF or image format conversion task — converting PDF and images (JPG/JPEG/PNG/BMP/TIFF/TIF/WEBP/JPEG2000) to 10 formats (Word, Excel, PPT, H...

100 starsHas guide

Web Search Plus

Unified multi-provider web search and URL extraction skill with intelligent auto-routing across Serper, Brave, Tavily, Querit, Linkup, Exa, Firecrawl, Perple...

99 starsHas guide

Works Well With - Agents

Web Use

Web-Use is a CDP powered Browser Agent

290 starslangchain

Customer Service Ai Agent

使用LangGraph搭建多智能体客服系统

49 starslangchain

Run Kit

Web-based tmux orchestration dashboard for long-running AI agent tasks

49 stars