Myna UI

Overview

Myna UI (MynaUI) is a UI kit and design system by Praveen Juge that pairs a Figma file with matching React code built on Tailwind CSS, shadcn/ui and Radix UI. Designers work from the Figma file while developers copy the corresponding components into React or Next.js projects, so the two stay in sync.

The library is organized into four groups: elements, forms, marketing sections and application blocks. Documentation covers installation, fonts, assets and the design system, and the project also maintains its own MynaUI Icons set and a public changelog.

Features

• Elements: Accordion, alerts, avatars and avatar groups, badges, button groups, calendar, combobox, command, data table, dialogs, drawers, menus, rating, sheet, toasts and tooltips.
• Forms: Checkbox, date picker, input, OTP input, radio, select, slider, switch and textarea.
• Marketing sections: 404 pages, banners, blog list and post, calls to action, cookie notices, FAQ, features, footers, galleries, heroes, newsletters, statistics and testimonial logos.
• Application blocks: App headers and sheets, dialogs, cards, chat, code blocks, empty states, notifications, and login, registration and forgot password screens.
• Figma file: A companion Figma Community file mirrors the components for design work.
• MynaUI Icons: A dedicated icon set with its own gallery.
• Dark mode: Components and docs support light and dark themes.

Tech stack

• React, Next.js, Tailwind CSS, shadcn/ui, Radix UI
• Figma