Skip to main contentMynaUI

Learn how to get started with MynaUI.

Introduction

MynaUI is a modern, accessible, and customizable UI library built with TailwindCSS. It is designed to help you build beautiful and functional web applications quickly and easily.

I recommend starting by signing up for a new account by using the sign in button at the top of the page. This will give you access to the components and documentation.

TailwindCSS

If you are new to TailwindCSS, you can get started with the official documentation. We always use the latest version of TailwindCSS, to make sure you have the latest version, run the following command:

npm install tailwindcss@latest

One tailwind plugin we use is @tailwindcss/typography, to install it run the following command:

npm install -D @tailwindcss/typography@latest

To learn more about the @tailwindcss/typography plugin visit their documentation.

shadcn/ui

We use shadcn/ui for all the components in MynaUI. To install it, refer to their documentation.

After installing, your components.json should look something like this:

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "app/globals.css",
    "baseColor": "slate",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  }
}

Update your css file to change the default colors:

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 221.2 83.2% 53.3%;
    --radius: 0.7rem;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 217.2 91.2% 59.8%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 224.3 76.3% 48%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
  }
}

Geist Font

We use geist font for all the typography in MynaUI. To install it, refer to their documentation.

MynaUI Icons

We use MynaUI Icons for all the icons. To install into shadcn/ui project, run the following command:

npx shadcn@latest add https://mynaui.com/icons/shadcn.json

Or install into a react project, run the following command:

npm install @mynaui/icons-react

To learn more about the MynaUI Icons, visit our documentation.

Default Class (Optional)

We use a default class for all the components in MynaUI. To use it, add the following class to the root (html tag) element of your application:

<html className="font-geist-sans text-sm antialiased"></html>

This will apply the default font and text size to all the components in MynaUI.

That's it! You are now ready to start building your app 🎉.