Joko UI

Joko UI components are divided into two main categories:

📱 Application UI

Functional components for building web applications, such as:

• Accordions, Alerts, Avatars, Badges, Breadcrumbs, Buttons, Cards, Carousels, Checkboxes, Date Pickers, Drawers, Dropdowns, Forms, Inputs, Loaders, Modals, Navbars, Paginations, Progress, Radios, Selects, Sidebars, Skeletons, Tables, Tabs, Toasts, Toggles, and Tooltips.

📣 Marketing UI

Components designed for high-converting landing pages, such as:

• Author Cards, Banners, Blog Cards, Brand Lists, CTAs, Description Lists, Error Pages, FAQ, Feature Sections, Footers, Headers, Heroes, Newsletter, Pricing, Stats, Steppers, Teams, and Testimonials.

To add a new visual or functional variant to a component, locate the component's definition file in lib/data/components/[category]/[component].tsx. Append a new object to the variants array containing a unique id, a display name, and the code string (the HTML/JSX snippet including Tailwind CSS classes).

{
  id: 'variant-slug',
  name: 'Variant Name',
  code: `<button class="...">...</button>`,
}

To create an entirely new category of components, follow these steps:

1. Create the directory: Create a new folder at lib/data/components/[new-category].
2. Populate components: Create component files within this folder following the standard component definition pattern.
3. Export category components: Create an index.ts file inside the new category folder to export the array of components.
4. Integrate with the core registry: Update lib/data/components/index.tsx by:
   • Importing the new category array.
   • Importing an icon for the category.
   • Adding the new category object to the getAllComponents function.
   • Updating the following helper functions to include the new category: getComponentBySlug, getComponentsByCategory, and getTotalComponentCount.

Joko UI is a collection of copy-paste ready Tailwind CSS components. There is no installation process, no npm packages to manage, and no configuration required. It is designed to work with any standard Tailwind CSS setup.

To use Joko UI, simply copy the source code of a component from the official website and paste it directly into your project files.

To introduce a new component into an established category:

1. Create the component file: Create lib/data/components/[category]/[slug].tsx.
2. Define the component: Use the ComponentType type to define the component object. You must provide a slug, name, icon (using @tabler/icons-react), description, and a variants array.
3. Register the component: Open lib/data/components/[category]/index.ts, import your new component, and add it to the exported array (e.g., applicationComponents).

import { ComponentType } from '../types';

export const myComponent: ComponentType = {
  slug: 'my-component',
  name: 'My Component',
  icon: <IconName stroke={1.5} />,
  description: 'Description of the component',
  variants: [ ... ]
};

Follow these steps to integrate components into your project:

1. Browse: Visit the Joko UI website to find a component.
2. Preview: Use the built-in controls to preview the component at different breakpoints (Mobile, Tablet, Desktop).
3. Theme Check: Toggle Dark Mode to verify how the component renders in dark themes.
4. Copy: Click the 'Code' tab or the 'Copy Code' button to copy the source code.
5. Paste: Paste the code into your project.

Note: All components support both Light and Dark modes out of the box using Tailwind's dark: modifier.

The author-cards component provides several pre-designed profile card layouts for displaying writer or creator information. These are available as different variants depending on your UI needs (e.g., simple, horizontal, stats-focused, or glassmorphism styles). Each variant is provided as a raw HTML/Tailwind CSS snippet that can be integrated into your project.

import { author_cards } from 'lib/data/components/marketing/author-cards';

// Access variants via author_cards.variants
const variants = author_cards.variants;

The simple-modal variant is a lightweight dialog used to display information and a single confirmation button. It uses a max-w-sm constraint and supports dark mode via dark:bg-gray-900 and dark:text-white classes.

<div class="w-full max-w-sm bg-white dark:bg-gray-900 rounded-2xl shadow-xl border border-gray-200 dark:border-gray-800 p-6">
  <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">Modal Title</h3>
  <p class="text-gray-500 dark:text-gray-400 text-sm mb-6">This is a simple modal dialog. You can use it to display some text to the user.</p>
  <div class="flex justify-end">
    <button class="px-4 py-2 bg-gray-900 dark:bg-white text-white dark:text-gray-900 font-medium rounded-lg hover:bg-gray-800 dark:hover:bg-gray-100 transition-colors">
      Understood
    </button>
  </div>
</div>

The avatar-toast variant includes a user avatar, making it ideal for social notifications like mentions.

<div class="max-w-xs bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 shadow-lg rounded-xl p-4 flex items-start gap-3">
  <img src="https://i.pravatar.cc/150?u=a042581f4e29026704d" alt="Avatar" class="w-10 h-10 rounded-full object-cover shrink-0" />
  <div class="flex-1">
    <p class="text-sm font-medium text-gray-900 dark:text-white">Sarah Jenkins</p>
    <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Mentioned you in a comment.</p>
    <p class="text-xs text-lime-600 dark:text-lime-400 mt-2 hover:underline cursor-pointer">View comment</p>
  </div>
</div>