### Card Components (HTML) Source: https://context7.com/rayasabari/joko-ui/llms.txt Offers versatile HTML snippets for card components with various styling options. Includes examples for simple cards, cards with images, glassmorphism effects, hover animations, animated blur, neon glow, particle effects, and liquid animations, primarily using Tailwind CSS. ```html

Card Title

This is a simple card component with a clean design.

Glass Card

A beautiful glassmorphism card design.

Hover Card

Hover me for a nice effect!

``` -------------------------------- ### HTML Form Input Components for User Interfaces Source: https://context7.com/rayasabari/joko-ui/llms.txt This HTML code provides examples of modern form input components. It includes basic text inputs, inputs with leading icons, and floating label styles. These are designed for various form layouts like login or settings pages. ```html
``` -------------------------------- ### Get Joko UI Components by Category (TypeScript) Source: https://context7.com/rayasabari/joko-ui/llms.txt Retrieves all components within a specified category ('application' or 'marketing'). Returns an array of `ComponentType` objects, useful for filtering and displaying components by their category. ```typescript import { getComponentsByCategory } from '@/lib/data/components'; // Get all application components const appComponents = getComponentsByCategory('application'); // Returns array of: navbars, sidebars, breadcrumbs, avatars, forms, buttons, // cards, loaders, badges, alerts, progress, skeleton // Get all marketing components const marketingComponents = getComponentsByCategory('marketing'); // Returns array of: headers, heroes, banners, ctas, stats, description_list, // pricing, teams, testimonials, faq, footers // Example: Display component count by category const totalAppVariants = appComponents.reduce( (acc, component) => acc + component.variants.length, 0 ); console.log(`Application components: ${totalAppVariants} variants`); ``` -------------------------------- ### Get All Joko UI Components (TypeScript) Source: https://context7.com/rayasabari/joko-ui/llms.txt Retrieves all component categories, including application and marketing components, along with their associated components. This function is useful for displaying an overview of the available UI elements. ```typescript import { getAllComponents } from '@/lib/data/components'; // Get all component categories const categories = getAllComponents(); // Returns: [ // { // slug: 'application', // name: 'Application', // icon: , // description: 'UI components for building modern web applications', // components: [...applicationComponents] // }, // { // slug: 'marketing', // name: 'Marketing', // icon: , // description: 'Marketing and landing page components', // components: [...marketingComponents] // } // ] // Usage in React component { getAllComponents().map((category) => (

{category.name} Components

{category.components.map((component) => ( ))}
)); } ``` -------------------------------- ### Get Joko UI Component by Slug (TypeScript) Source: https://context7.com/rayasabari/joko-ui/llms.txt Retrieves a specific component by its category and slug. Returns undefined if the component is not found. This is useful for fetching details of a single component for display or editing. ```typescript import { getComponentBySlug } from '@/lib/data/components'; // Get a specific component const buttonsComponent = getComponentBySlug('application', 'buttons'); // Returns: { // slug: 'buttons', // name: 'Buttons', // icon: , // description: 'Beautiful button components with various styles and states', // variants: [ // { id: 'btn-primary', name: 'Primary Button', code: '...', contributor: 'rayasabari' }, // { id: 'btn-secondary', name: 'Secondary Button', code: '...', contributor: 'rayasabari' }, // // ... more variants // ] // } // Access component variants if (buttonsComponent) { buttonsComponent.variants.forEach((variant) => { console.log(`${variant.name}: ${variant.code}`); }); } ``` -------------------------------- ### Get Total Component Count (TypeScript) Source: https://context7.com/rayasabari/joko-ui/llms.txt Retrieves the total number of component variants across all categories. This function is useful for displaying statistics, such as the total count of available components on a homepage. It returns a single number representing the sum of all variants. ```typescript import { getTotalComponentCount } from '@/lib/data/components'; // Get total number of component variants const totalComponents = getTotalComponentCount(); // Returns: number (sum of all variants in application + marketing categories) // Usage in hero section
{totalComponents}+ Free Components
``` -------------------------------- ### Component Preview React Component Usage Source: https://context7.com/rayasabari/joko-ui/llms.txt Demonstrates how to use the `ComponentPreview` React component to display and interact with other components. It includes features like responsive sizing, code view toggle, and copy-to-clipboard. ```typescript 'use client'; import ComponentPreview from '@/app/components/ComponentPreview'; // Usage in page component function ComponentPage() { const componentCode = ``; return ( {/* Rendered component preview */} ); } // ComponentPreview provides: // - Responsive preview sizes: Mobile (320px), Small (640px), Medium (768px), Large (1024px), Full // - Tab switching between 'Preview' and 'Code' views // - Copy to clipboard functionality // - Dark/Light mode preview support // - Syntax highlighted code display ``` -------------------------------- ### getAllComponents Source: https://context7.com/rayasabari/joko-ui/llms.txt Retrieves all component categories, including both application and marketing components. ```APIDOC ## getAllComponents ### Description Retrieves all component categories with their associated components. Returns an array of `ComponentCategory` objects containing both application and marketing components. ### Method `getAllComponents()` ### Returns `ComponentCategory[]` - An array of component category objects. ### Example Usage ```typescript import { getAllComponents } from '@/lib/data/components'; // Get all component categories const categories = getAllComponents(); // Example of the returned structure: // [ // { // slug: 'application', // name: 'Application', // icon: , // description: 'UI components for building modern web applications', // components: [...applicationComponents] // }, // { // slug: 'marketing', // name: 'Marketing', // icon: , // description: 'Marketing and landing page components', // components: [...marketingComponents] // } // ] // Usage in React component: // { // getAllComponents().map((category) => ( //
//

{category.name} Components

// {category.components.map((component) => ( // // ))} //
// )) // } ``` ``` -------------------------------- ### Define New Component (TypeScript) Source: https://github.com/rayasabari/joko-ui/blob/main/ADDING_COMPONENTS.md Illustrates the structure for defining a new component using the `ComponentType` interface in TypeScript. This includes specifying the component's slug, name, icon, description, and its associated variants. The icon should be imported from `@tabler/icons-react`. ```typescript import { ComponentType } from '../types'; export const myComponent: ComponentType = { slug: 'my-component', name: 'My Component', icon: , // Import icon from @tabler/icons-react description: 'Description of the component', variants: [ ... ] }; ``` -------------------------------- ### Adding New Components to Joko UI Library Source: https://context7.com/rayasabari/joko-ui/llms.txt Illustrates the process of adding a new component to the Joko UI library. This involves creating a component definition file and exporting it from the category index file. ```typescript // lib/data/components/application/my-component.tsx import { IconStar } from '@tabler/icons-react'; import { ComponentType } from '../types'; export const myComponent: ComponentType = { slug: 'my-component', name: 'My Component', icon: , description: 'Description of my component', variants: [ { id: 'variant-1', name: 'Basic Variant', code: `

My Component

`, contributor: 'your-github-username', }, ], }; // lib/data/components/application/index.ts import { myComponent } from './my-component'; export const applicationComponents: ComponentType[] = [ // ... existing components myComponent, ]; ``` -------------------------------- ### HTML Alert Components for User Feedback Source: https://context7.com/rayasabari/joko-ui/llms.txt These HTML snippets demonstrate various alert and notification components. They are designed for user feedback and include styles for success, error, and informational messages. Some variants feature descriptions or call-to-action elements. ```html

Success! Your changes have been saved.

Error

  • Your password must be at least 8 characters
  • Your password must include a special character
``` -------------------------------- ### getComponentsByCategory Source: https://context7.com/rayasabari/joko-ui/llms.txt Retrieves all components within a specific category. ```APIDOC ## getComponentsByCategory ### Description Retrieves all components within a specific category. Returns the full array of `ComponentType` objects for either the 'application' or 'marketing' category. ### Method `getComponentsByCategory(categorySlug: string): ComponentType[]` ### Parameters #### Path Parameters - **categorySlug** (string) - Required - The slug identifier for the component category (e.g., 'application', 'marketing'). ### Returns `ComponentType[]` - An array of component objects belonging to the specified category. ### Example Usage ```typescript import { getComponentsByCategory } from '@/lib/data/components'; // Get all application components const appComponents = getComponentsByCategory('application'); // Returns array of: navbars, sidebars, breadcrumbs, avatars, forms, buttons, // cards, loaders, badges, alerts, progress, skeleton // Get all marketing components const marketingComponents = getComponentsByCategory('marketing'); // Returns array of: headers, heroes, banners, ctas, stats, description_list, // pricing, teams, testimonials, faq, footers // Example: Display component count by category // const totalAppVariants = appComponents.reduce( // (acc, component) => acc + component.variants.length, // 0 // ); // console.log(`Application components: ${totalAppVariants} variants`); ``` ``` -------------------------------- ### HTML Hero Section Components for Landing Pages Source: https://context7.com/rayasabari/joko-ui/llms.txt This HTML snippet showcases a simple hero section component suitable for landing pages. It features a prominent heading, descriptive text, and a pair of call-to-action buttons. The design is responsive and includes dark mode styling. ```html

Build Beautiful Websites Faster

Free Tailwind CSS components to help you create stunning websites without starting from scratch.

Get Started Learn More
``` -------------------------------- ### Button Components (HTML) Source: https://context7.com/rayasabari/joko-ui/llms.txt Provides copy-paste ready HTML snippets for various button styles. Includes options for primary, secondary, outline, gradient, glass, icon, animated, social media, and retro designs, often utilizing Tailwind CSS classes for styling. ```html ``` -------------------------------- ### getComponentBySlug Source: https://context7.com/rayasabari/joko-ui/llms.txt Retrieves a specific component by its category and slug identifier. ```APIDOC ## getComponentBySlug ### Description Retrieves a specific component by its category and slug identifier. Returns `undefined` if the component is not found. ### Method `getComponentBySlug(categorySlug: string, componentSlug: string): ComponentType | undefined` ### Parameters #### Path Parameters - **categorySlug** (string) - Required - The slug identifier for the component category (e.g., 'application', 'marketing'). - **componentSlug** (string) - Required - The slug identifier for the specific component (e.g., 'buttons', 'navbars'). ### Returns `ComponentType | undefined` - The component object if found, otherwise `undefined`. ### Example Usage ```typescript import { getComponentBySlug } from '@/lib/data/components'; // Get a specific component const buttonsComponent = getComponentBySlug('application', 'buttons'); // Example of the returned structure: // { // slug: 'buttons', // name: 'Buttons', // icon: , // description: 'Beautiful button components with various styles and states', // variants: [ // { id: 'btn-primary', name: 'Primary Button', code: '...', contributor: 'rayasabari' }, // { id: 'btn-secondary', name: 'Secondary Button', code: '...', contributor: 'rayasabari' }, // // ... more variants // ] // } // Access component variants: // if (buttonsComponent) { // buttonsComponent.variants.forEach((variant) => { // console.log(`${variant.name}: ${variant.code}`); // }); // } ``` ``` -------------------------------- ### Simple Pricing Card HTML Component Source: https://context7.com/rayasabari/joko-ui/llms.txt A basic HTML structure for a pricing card, including a plan name, description, price, feature list, and a call-to-action button. This component is styled using Tailwind CSS classes. ```html

Pro Plan

For growing businesses

$29 /month
  • Unlimited projects
  • Priority support
``` -------------------------------- ### Use Pagination Hook for Client-Side Data (TypeScript) Source: https://context7.com/rayasabari/joko-ui/llms.txt A React hook designed for client-side pagination of component lists. It manages page state, provides navigation controls (next, previous, first, last page), and returns sliced data arrays for the current page. The hook accepts an array of data and an optional items per page configuration. ```typescript import { usePagination } from '@/lib/hooks/usePagination'; interface UsePaginationProps { data: T[]; itemsPerPage?: number; // default: 10 } interface UsePaginationReturn { currentItems: T[]; currentPage: number; totalPages: number; totalItems: number; hasNextPage: boolean; hasPreviousPage: boolean; goToPage: (page: number) => void; nextPage: () => void; previousPage: () => void; goToFirstPage: () => void; goToLastPage: () => void; } // Usage example with component variants function ComponentList({ variants }: { variants: ComponentVariant[] }) { const { currentItems, currentPage, totalPages, hasNextPage, hasPreviousPage, nextPage, previousPage, } = usePagination({ data: variants, itemsPerPage: 6 }); return (
{currentItems.map((variant) => (
))}
Page {currentPage} of {totalPages}
); } ``` -------------------------------- ### Add Variant to Existing Component (TypeScript) Source: https://github.com/rayasabari/joko-ui/blob/main/ADDING_COMPONENTS.md Demonstrates how to add a new variant to an existing component by modifying the `variants` array in the component's TypeScript file. This involves defining the variant's ID, name, and its corresponding HTML structure with Tailwind CSS classes. ```typescript { id: 'variant-slug', name: 'Variant Name', code: '', // HTML code with Tailwind classes } ``` -------------------------------- ### Component Data Types Source: https://context7.com/rayasabari/joko-ui/llms.txt Defines the structure for components, variants, and categories within the Joko UI library. ```APIDOC ## Component Data Types ### Description The core type definitions that structure all components in the library, defining variants, component metadata, and category organization. ### Code Example ```typescript // lib/data/components/types.ts import React from 'react'; // Individual component variant with code snippet export interface ComponentVariant { id: string; name: string; code: string; contributor?: string; } // Component type with multiple variants export interface ComponentType { slug: string; name: string; icon: React.ReactNode; description: string; variants: ComponentVariant[]; pagination?: { enabled: boolean; itemsPerPage: number; showPageNumbers?: boolean; showInfo?: boolean; }; } // Category grouping multiple components export interface ComponentCategory { slug: string; name: string; icon?: React.ReactNode; description: string; components: ComponentType[]; } ``` ``` -------------------------------- ### Joko UI Component Type Definitions (TypeScript) Source: https://context7.com/rayasabari/joko-ui/llms.txt Defines the core TypeScript types for structuring Joko UI components, including variants, metadata, and category organization. These types are essential for managing and rendering the component library. ```typescript import React from 'react'; // Individual component variant with code snippet export interface ComponentVariant { id: string; name: string; code: string; contributor?: string; } // Component type with multiple variants export interface ComponentType { slug: string; name: string; icon: React.ReactNode; description: string; variants: ComponentVariant[]; pagination?: { enabled: boolean; itemsPerPage: number; showPageNumbers?: boolean; showInfo?: boolean; }; } // Category grouping multiple components export interface ComponentCategory { slug: string; name: string; icon?: React.ReactNode; description: string; components: ComponentType[]; } ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.