Jem UI

screenshot of Jem UI
nextjs
react
tanstack
tailwind
cmdk
shadcn-ui

A shadcn based custom registry for using Base UI components.

Overview

JEM/UI is an innovative component registry designed to enhance your development experience by integrating Base UI primitives directly with shadcn/ui. It's tailored for developers who are already familiar with shadcn/ui and are looking to expand their toolkit without the hassle of removing Radix UI. With a focus on seamless integration and ease of use, JEM/UI streamlines the process of adding fully-styled and type-safe components to your projects using simple CLI commands.

The tool aims to simplify the development workflow, providing an efficient way to create and customize components that work harmoniously within the existing shadcn ecosystem. With its comprehensive documentation and user-friendly setup, JEM/UI is particularly valuable for developers who value both speed and performance in their projects.

Features

  • Seamless Integration: Effortlessly integrate Base UI primitives within your existing shadcn/ui setup without the need for extensive modifications.
  • Type-Safe Components: Built with TypeScript, JEM/UI ensures that your components are type-safe, reducing the likelihood of runtime errors.
  • Easy Customization and Extensibility: Components are designed to be easily customizable, allowing you to tailor them to your project's requirements.
  • Quick Setup: Use the shadcn CLI to quickly add and scaffold components, making the setup process straightforward and efficient.
  • Comprehensive Documentation: Access complete documentation and detailed component API references, helping you make the most of the available features.
nextjs
Next.js

Next.js is a React-based web framework that enables server-side rendering, static site generation, and other powerful features for building modern web applications.

react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

tanstack
TanStack

TanStack is a collection of high-quality, framework-agnostic libraries including TanStack Query for data fetching, TanStack Router for routing, TanStack Table for tables, and more. These tools provide powerful, type-safe solutions for common web development challenges.

tailwind
Tailwind

Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.

cmdk
cmdk

cmdk is a fast, composable command menu component for React. It provides the foundation for building command palettes, search interfaces, and keyboard-navigable menus similar to those found in applications like VS Code, Linear, and Raycast.

shadcn-ui
Shadcn UI

Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.

react-hook-form
React Hook Form

React Hook Form is a performant, flexible, and extensible form library for React with easy validation. It reduces re-renders and improves performance by using uncontrolled components and native HTML validation, making form handling simple and efficient.

recharts
Recharts

Recharts is a powerful and easy-to-use React library for building customizable and interactive charts. Built on D3.js, it offers a wide range of pre-built chart types, such as line, bar, pie, and scatter charts, all of which can be composed with a declarative syntax.

typescript
Typescript

TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.

zod
Zod

Zod is a TypeScript-first schema declaration and validation library. It allows you to define schemas that can validate data at runtime while providing excellent TypeScript inference, making it perfect for API validation, form validation, and type-safe data handling.