Shuip

Overview

shuip (ship + ui) is an open-source, MIT-licensed React component library for Next.js applications, built on shadcn/ui. It turns shadcn/ui primitives into business-ready components: a Button becomes a SubmitButton with automatic loading state, and Input plus form components become an InputField with built-in Zod validation and error handling.

The library is distributed through the shadcn CLI under the @shuip namespace and serves both Base UI and Radix variants, picked automatically from the style in components.json. It targets React and Next.js developers, teams standardizing their UI, and freelancers who want less form boilerplate.

Features

• Form fields for React Hook Form: Input, select, combobox, autocomplete, checkbox, radio, number, password, textarea, date, date range, datetime, month and time fields
• TanStack Form support: A parallel set of field components plus a form context and submit button
• TanStack Query helper: A Query Boundary component for TanStack Query
• UI components: Confirmation dialog, copy button, hover reveal, search input, side dialog, submit button and theme button
• Blocks: Calendar with month, week, day and agenda views, drag-and-drop data board and kanban, TanStack Table data table, responsive dialog and title section
• Base UI or Radix: One install command; the project's style selects the variant
• Agent support: Agent skills docs and an llms-full.txt file

Tech stack

• React, Next.js
• shadcn/ui (Base UI or Radix)
• Tailwind CSS
• TypeScript
• React Hook Form, TanStack Form, Zod

Getting started

Declare the namespace in components.json:

{
  "registries": {
    "@shuip": "https://shuip.plvo.dev/r/{style}/{name}.json"
  }
}

Then add a component:

npx shadcn@latest add @shuip/submit-button