APOLLO TERMINAL v1.0 –
> █type '/help' for commands
Skip to main content
0200 / 00:00:00 / 1970.01.01
×
HOME ABOUT NEWS PROJECTS REFERENCES LINKS

FOUR PLUGINS FOR SHADCN, BASE UI, DAISYUI AND MANTINE

A quick one, but it covers four plugins at once :)

Remember PyUI Helper? It came from being tired of looking up UI elements in docs all day. The JavaScript world has the same problem, just with a lot more libraries. And each library works differently, so each one got its own plugin.

shadcn Helper

shadcn Helper plugin logo

The oldest of the four. shadcn/ui is different from a normal library: the components live in your repo, as code you own. So shadcn Helper works with that - completion, auto-import, Go to Definition and hover docs, a component browser with 60+ components, the CLI v4 init wizard (with Base UI, Radix UI or React Aria underneath), support for multiple registries, and monorepo detection. It also has checks the others don’t: accessibility hints, and composition checks for Dialog, Select and Tabs. Works with React, Vue, Svelte and Solid.

Flexible for Base UI

Flexible for Base UI plugin logo

Base UI is headless: no styles, all behavior. Flexible for Base UI covers its 37 components and 4 utilities with dot-notation completion (Accordion.Root, Select.Trigger), auto-import from @base-ui-components/react, hover docs with props and examples, and a live preview in light and dark.

Flexible for daisyUI

Flexible for daisyUI plugin logo

The opposite end: daisyUI is CSS classes only, on top of Tailwind. Flexible for daisyUI bundles the daisyUI v5 class library (no build tool needed) and completes 440+ classes in HTML, JSX, Vue, CSS and Tailwind @apply. It has 65 components in 7 categories, 35 themes, and snippets that know the file type: JSX gets className, Vue lands in <template>, and HTML gets the CDN link.

Flexible for Mantine

Flexible for Mantine plugin logo

Mantine is all about props. So Flexible for Mantine does prop completion with the real enum values (variant, color, size, radius, spacing), hover docs with a props table, an unknown-prop inspection, and smart import merging across 10 @mantine/* packages - core, hooks, dates, charts, notifications and more.

What they share

All four have a component browser with drag-and-drop (imports included) and hover docs that link to the official docs, and they all run in JetBrains IDEs from 2023.3 on. The Base UI, daisyUI and Mantine plugins are unofficial - not affiliated with the library authors.

Later this year I’ll go deeper into why headless libraries like Base UI are actually the hardest of the bunch for an IDE.

Cheers, Paul

Background
EducationEBS Business School, SFSU, HSG
Experience20 Years Enterprise Systems
BuiltScipio ERP - ERP & Ecommerce System
Author"Start/Up - Set the net on fire"
JetBrains5x Plugins Published
Tech Stack
LanguagesJava, Python, JS, TS, Rust, Go, Swift, PHP
FrontendReact, Vue, Angular, HTML/CSS
DatabasesPostgreSQL, MySQL, MongoDB
CachingRedis, Memcached
Key Clients
EnterpriseL'Oréal, Amadeus, Konica Minolta, Orange
Digital1&1 Internet, Sedo.com, Creditsafe
PublicDRK, Kanton Basel, Aktion Mensch, Börsenverein
← PREV NEXT → TOP ↑