Introduction
Installation
Next.jsViteLaravelReact RouterRemixAstroTanStack StartTanStack RouterManual InstallationMCP
All componentsTheme
FieldFormInputText FieldTextareaSearch FieldInput OTPNumber FieldNumber FormatSliderCheckboxSwitchRadioSelectCombo BoxList BoxChoice BoxMulti SelectToken FieldNewTag FieldTag GroupCalendarDate FieldDate PickerDate Range PickerRange CalendarTime FieldColor PickerColor FieldColor AreaColor SliderColor SwatchColor Swatch PickerColor ThumbColor WheelDrop ZoneFile Trigger
ButtonButton GroupToggleToggle GroupPreskok Auth Button
EditorHeadingLinkTextKeyboard
CardContainerGrid ListResizableTableTreeSeparatorDescription ListScroll AreaShow MoreToolbar
BreadcrumbsNavbarPaginationTabsSidebar
DialogModalDrawerPopoverPreview TriggerNewSheetTooltipContext MenuDropdownCommandCommand MenuDisclosureMenu
ToastProgress BarProgress CircleMeterLoaderSkeletonNoteBadge
Chart (helpers)Area ChartBar ChartLine ChartPie ChartExperimental ChartsNewExperimental Radial ChartNewExperimental Radar ChartNewBar ListTracker
Async ImageAvatarCarouselPreskok Icon
Installation

MCP

Use Preskok UI with the shadcn MCP server.

View as MarkdownAsk ChatGPT

Preskok UI works with the official shadcn MCP server through the @preskok registry namespace. There is no separate Preskok MCP server.

Initialize your project

Start with a project initialized by Preskok UI. For MCP registry discovery, components.json must contain the Preskok registry namespace:

components.json
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "aria-nova",
  "registries": {
    "@preskok": "https://ui-three-mu.vercel.app/r/{name}.json"
  }
}

For a new project, shadcn resolves Preskok from its registry directory and writes this configuration for you:

npx shadcn@latest init @preskok/default

Configure your MCP client

Configure your MCP client to run the shadcn MCP server:

config.toml
[mcp_servers.shadcn]
command = "npx"
args = ["shadcn@latest", "mcp"]

The MCP process must start in the project directory that contains components.json. In a monorepo, use the app package directory, not the monorepo root.

What the MCP can do

The shadcn MCP server can list configured registries, search @preskok items, view item metadata, return example source code, and produce install commands.

For example, an MCP client can resolve this install command:

npx shadcn@latest add @preskok/button

Current shadcn MCP limitations

The shadcn MCP view_items_in_registries tool returns component metadata, file counts, and dependencies, but not component file source. The registry JSON and shadcn view @preskok/button do include component source.

The get_item_examples_from_registries tool does return full example source code.

Manual Installation

Configure Preskok UI without a framework preset.

All components

Browse every Preskok UI component in one place.

On this page

Initialize your project
Configure your MCP client
What the MCP can do
Current shadcn MCP limitations