---
name: "@mksingh"
slug: "mksingh"
description: "mksingh.dev is the personal shadcn/ui registry of Mukesh Singh, a Staff Software Engineer working across Rust, TypeScript, and Go. The registry documents ReactJS components, hooks, JSON form renderers, and TanStack integrations alongside notes on open-source projects including Shield (self-hosted IAM/CIAM in Rust inspired by Google Zanzibar) and TypeSense UI (a UI layer for Typesense search). Focused on production-ready, drop-in additions with no extra setup required for existing shadcn projects. Use for: borrowing specific utilities, form renderers, or search-UI primitives from a senior engineer's personal collection when the standard shadcn set is insufficient."
category: "Personal/portfolio registry"
tags: ["buttons", "charts", "components", "design-system", "forms", "hooks", "theming"]
framework: "react"
license: "MIT"
author: "mksinghdev"
website: "https://mksingh.dev/docs"
github: "https://github.com/mksinghdev/ui"
registry: "https://mksingh.dev/r/registry.json"
pro: false
pro_url: null
github_stars: 0
component_count: 36
generated_at: "2026-07-28T08:59:05.895Z"
---

# @mksingh

mksingh.dev is the personal shadcn/ui registry of Mukesh Singh, a Staff Software Engineer working across Rust, TypeScript, and Go. The registry documents ReactJS components, hooks, JSON form renderers, and TanStack integrations alongside notes on open-source projects including Shield (self-hosted IAM/CIAM in Rust inspired by Google Zanzibar) and TypeSense UI (a UI layer for Typesense search). Focused on production-ready, drop-in additions with no extra setup required for existing shadcn projects. Use for: borrowing specific utilities, form renderers, or search-UI primitives from a senior engineer's personal collection when the standard shadcn set is insufficient.

## Links

- Website: https://mksingh.dev/docs
- GitHub: https://github.com/mksinghdev/ui
- Registry JSON: https://mksingh.dev/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/mksingh
- This file: https://sh4dcn.vercel.app/md/mksingh.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://mksingh.dev/r/registry.json
pnpm dlx shadcn@latest add https://mksingh.dev/r/registry.json
bunx shadcn@latest add https://mksingh.dev/r/registry.json
# clone the source repo
git clone https://github.com/mksinghdev/ui.git
# fetch the raw registry index
curl -s https://mksingh.dev/r/registry.json
```

## Components (36)

| name | type | description | install |
| --- | --- | --- | --- |
| typography | registry:component | A polymorphic Typography component with 14 variants (hero, h1–h4, p, lead, large, small, muted, tiny, blockquote, code, error) built with cva. Renders the sema… | `npx shadcn@latest add https://mksingh.dev/r/typography.json` |
| use-isomorphic-layout-effect | registry:hook | A React hook that provides cross-platform compatibility for useLayoutEffect, automatically falling back to useEffect on the server-side to prevent hydration mi… | `npx shadcn@latest add https://mksingh.dev/r/use-isomorphic-layout-effect.json` |
| use-media-query-hook | registry:hook | A React hook for responsive design that listens to CSS media queries and returns boolean values, enabling components to conditionally render content based on s… | `npx shadcn@latest add https://mksingh.dev/r/use-media-query-hook.json` |
| jsonforms-anyof-string-or-enum-control | registry:component | JSONForms combobox renderer for anyOf schemas that combine enum values with a plain string type. Renders a text input with a datalist dropdown — user can pick … | `npx shadcn@latest add https://mksingh.dev/r/jsonforms-anyof-string-or-enum-control.json` |
| jsonforms-array-layout | registry:component | JSONForms accordion-based renderer for arrays of objects. Each item renders in a collapsible panel with add, remove, and reorder controls. | `npx shadcn@latest add https://mksingh.dev/r/jsonforms-array-layout.json` |
| jsonforms-boolean-control | registry:component | JSONForms checkbox renderer for boolean type fields. | `npx shadcn@latest add https://mksingh.dev/r/jsonforms-boolean-control.json` |
| jsonforms-boolean-toggle-control | registry:component | JSONForms switch/toggle renderer for boolean fields. Activated by setting options.toggle to true in the UISchema. | `npx shadcn@latest add https://mksingh.dev/r/jsonforms-boolean-toggle-control.json` |
| jsonforms-categorization | registry:component | JSONForms tabs/categorization layout renderer for UISchema Categorization elements. | `npx shadcn@latest add https://mksingh.dev/r/jsonforms-categorization.json` |
| jsonforms-boolean-cell | registry:component | JSONForms checkbox cell for boolean fields inside array table layouts. | `npx shadcn@latest add https://mksingh.dev/r/jsonforms-boolean-cell.json` |
| jsonforms-boolean-toggle-cell | registry:component | JSONForms switch cell for boolean fields inside array table layouts. | `npx shadcn@latest add https://mksingh.dev/r/jsonforms-boolean-toggle-cell.json` |
| jsonforms-date-cell | registry:component | JSONForms date cell for date fields inside array table layouts. | `npx shadcn@latest add https://mksingh.dev/r/jsonforms-date-cell.json` |
| jsonforms-enum-cell | registry:component | JSONForms select cell for enum fields inside array table layouts. | `npx shadcn@latest add https://mksingh.dev/r/jsonforms-enum-cell.json` |
| jsonforms-integer-cell | registry:component | JSONForms integer cell for integer fields inside array table layouts. | `npx shadcn@latest add https://mksingh.dev/r/jsonforms-integer-cell.json` |
| jsonforms-number-cell | registry:component | JSONForms number cell for number fields inside array table layouts. | `npx shadcn@latest add https://mksingh.dev/r/jsonforms-number-cell.json` |
| jsonforms-number-format-cell | registry:component | JSONForms formatted number cell for fields inside array table layouts. Displays the current value formatted; on focus switches to a raw number input. | `npx shadcn@latest add https://mksingh.dev/r/jsonforms-number-format-cell.json` |
| jsonforms-oneof-enum-cell | registry:component | JSONForms select cell for oneOf enum fields inside array table layouts. | `npx shadcn@latest add https://mksingh.dev/r/jsonforms-oneof-enum-cell.json` |
| jsonforms-text-cell | registry:component | JSONForms text cell for string fields inside array table layouts. | `npx shadcn@latest add https://mksingh.dev/r/jsonforms-text-cell.json` |
| jsonforms-time-cell | registry:component | JSONForms time cell for time fields inside array table layouts. | `npx shadcn@latest add https://mksingh.dev/r/jsonforms-time-cell.json` |
| jsonforms-control | registry:component | JSONForms text input renderer for string type fields. | `npx shadcn@latest add https://mksingh.dev/r/jsonforms-control.json` |
| jsonforms-date-control | registry:component | JSONForms date input renderer. | `npx shadcn@latest add https://mksingh.dev/r/jsonforms-date-control.json` |
| jsonforms-datetime-control | registry:component | JSONForms datetime-local input renderer. | `npx shadcn@latest add https://mksingh.dev/r/jsonforms-datetime-control.json` |
| jsonforms-enum-control | registry:component | JSONForms select/dropdown renderer for enum type fields. | `npx shadcn@latest add https://mksingh.dev/r/jsonforms-enum-control.json` |
| jsonforms-group | registry:component | JSONForms collapsible accordion renderer for UISchema Group elements. | `npx shadcn@latest add https://mksingh.dev/r/jsonforms-group.json` |
| jsonforms-horizontal-layout | registry:component | JSONForms horizontal row layout renderer. Children are distributed equally. | `npx shadcn@latest add https://mksingh.dev/r/jsonforms-horizontal-layout.json` |
| jsonforms-label | registry:component | JSONForms static label/heading renderer for UISchema Label elements. | `npx shadcn@latest add https://mksingh.dev/r/jsonforms-label.json` |
| jsonforms-number-control | registry:component | JSONForms number/integer input renderer. | `npx shadcn@latest add https://mksingh.dev/r/jsonforms-number-control.json` |
| jsonforms-oneof-enum-control | registry:component | JSONForms select renderer for oneOf enum fields. Uses withJsonFormsOneOfEnumProps so options include title/const pairs. | `npx shadcn@latest add https://mksingh.dev/r/jsonforms-oneof-enum-control.json` |
| jsonforms-oneof-radio-group-control | registry:component | JSONForms radio group renderer for oneOf enum fields. Activated by setting options.format to 'radio' in the UISchema. | `npx shadcn@latest add https://mksingh.dev/r/jsonforms-oneof-radio-group-control.json` |
| jsonforms-radio-group-control | registry:component | JSONForms radio group renderer for enum fields. Activated by setting options.format to 'radio' in the UISchema. | `npx shadcn@latest add https://mksingh.dev/r/jsonforms-radio-group-control.json` |
| jsonforms-slider-control | registry:component | JSONForms slider renderer for numeric fields with minimum/maximum defined in schema. | `npx shadcn@latest add https://mksingh.dev/r/jsonforms-slider-control.json` |
| jsonforms-textarea-control | registry:component | JSONForms multi-line textarea renderer. Activated by setting options.multi to true in the UISchema. | `npx shadcn@latest add https://mksingh.dev/r/jsonforms-textarea-control.json` |
| jsonforms-time-control | registry:component | JSONForms time input renderer. | `npx shadcn@latest add https://mksingh.dev/r/jsonforms-time-control.json` |
| jsonforms-vertical-layout | registry:component | JSONForms vertical stack layout renderer. | `npx shadcn@latest add https://mksingh.dev/r/jsonforms-vertical-layout.json` |
| jsonforms-renderers | registry:component | Complete set of JSONForms renderers and cells built on ShadCN. Covers all controls from @jsonforms/material-renderers: text, number, integer, boolean (checkbox… | `npx shadcn@latest add https://mksingh.dev/r/jsonforms-renderers.json` |
| jsonforms-utils | registry:lib | Utility functions for JSONForms — includes translateError for rendering custom error messages from JSON Schema errorMessage annotations. | `npx shadcn@latest add https://mksingh.dev/r/jsonforms-utils.json` |
| tanstack-start-react-themes | registry:lib | A comprehensive theme management library for TanStack React Start applications with server-side rendering support, automatic system preference detection, and s… | `npx shadcn@latest add https://mksingh.dev/r/tanstack-start-react-themes.json` |

## For AI agents

```text
You are adding components from @mksingh to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/mksingh.md) for the component list.
2. Fetch the machine-readable index: https://mksingh.dev/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: mksingh).
```