A component registry built with Base UI primitives and powered by shadcn/ui.

If you're already using shadcn/ui but have been looking to explore Base UI without the hassle of ripping out Radix UI, JEM/UI makes it easy! Just initialize your project like any shadcn/ui setup and seamlessly add Base UI-powered components with the shadcn CLI.

• JEM/UI
  • Simple to try
  • Table of Contents
  • Introduction
  • Features
  • Quick Start
    • With pnpm (recommended)
    • Alternative package managers
  • Usage
  • Bugged using calendar/command inside a Base UI popover:
    • TODO: Report these to Base UI:
  • TODO: Either these components do not use Radix or Base UI primitives, or they are not yet supported and need a custom implementation:
  • Full Documentation
  • License

JEM/UI simplifies your development workflow by integrating Base UI primitives directly into a streamlined shadcn/ui registry. It leverages shadcn CLI commands, enabling you to quickly scaffold fully-styled, type-safe components directly into your project.

• Seamless integration of Base UI primitives
• Type-safe components built with TypeScript
• Easy customization and extensibility
• Complete documentation and component API references

Use the shadcn CLI to directly add components to your project:

pnpm dlx shadcn@latest add https://jem-ui.vercel.app/ui/accordion

• npm

npx shadcn@latest add https://jem-ui.vercel.app/ui/accordion

• bun

bunx --bun shadcn@latest add https://jem-ui.vercel.app/ui/accordion

Once you've added a component using the shadcn CLI, it's ready to use in your project like any other shadcn/ui component.

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion";

export function AccordionDemo() {
  return (
    <Accordion className="w-full">
      <AccordionItem>
        <AccordionTrigger>Is it accessible?</AccordionTrigger>
        <AccordionContent>
          Yes. It adheres to the WAI-ARIA design pattern.
        </AccordionContent>
      </AccordionItem>
      <AccordionItem>
        <AccordionTrigger>Is it styled?</AccordionTrigger>
        <AccordionContent>
          {`Yes. It comes with default styles that matches the other
          components&apos; aesthetic.`}
        </AccordionContent>
      </AccordionItem>
      <AccordionItem>
        <AccordionTrigger>Is it animated?</AccordionTrigger>
        <AccordionContent>
          {`Yes. It's animated by default, but you can disable it if you prefer.`}
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  );
}

• Date Picker
• Combobox

• Form
• Input OTP
• Navigation Menu
• Resizable
• Sidebar
• Skeleton
• Sonner
• Table

Visit the shadcn documentation to view the full documentation.

JEM/UI is licensed under the MIT License.