Introduction

mokri UI is a collection of beautifully designed, accessible, and customizable React components built with TypeScript and Tailwind CSS. Start building modern user interfaces faster.

What is mokri UI?

mokri UI is a component library that provides you with copy-and-paste React components built using Tailwind CSS. Unlike traditional component libraries, you have full control over the source code. This means you can customize every component to match your design system perfectly.

Quick Start

Get started in minutes. Install the package and start using components right away.

<> bash

npm install mokri-ui

Features

mokri UI is built with modern web standards and best practices in mind.

Fully Customizable

Every component is built with customization in mind. Modify styles, add features, or create variants to match your design system perfectly.

Accessible

Built with accessibility best practices. All components follow WAI-ARIA guidelines and work with screen readers and keyboard navigation.

Dark Mode

Full dark mode support out of the box. All components automatically adapt to light and dark themes using CSS variables.

TypeScript

Full TypeScript support with comprehensive type definitions. Enjoy type safety and better developer experience with autocomplete and IntelliSense.

Responsive

Mobile-first design that works seamlessly across all device sizes. All components are built with responsive breakpoints in mind.

Performance

Optimized for performance with minimal bundle size. Components are tree-shakeable and only include what you use.

How it Works

mokri UI components are installed as source code into your project, giving you complete control.

Install the package

Add mokri UI to your project using npm. This installs the component source code and required dependencies.

Configure Tailwind

Set up Tailwind CSS with the required configuration. Add CSS variables for theming support.

Start Building

Import and use components in your application. Customize them to match your design system.

Next Steps

Ready to get started? Follow these steps to set up mokri UI in your project.