Utility Hooks

Theme System

Variant Exports

Layout Components

UI Components

Core Primitives

Package Entry Point

src/index.ts
Main export barrel

Block
BlockProps

Box
BoxProps

Grid
GridProps

Flex
FlexProps

Stack
StackProps

Button
BaseButtonProps

Card + Card.Header/Content/Footer
CardProps, CardHeaderProps

Text
TextProps

Title
TitleProps

Badge
BadgeProps

Container
ContainerProps

Icon
IconProps

Image
ImageProps

Group
GroupProps

Sheet
SheetProps

Accordion
AccordionProps

DashLayout
DashLayoutProps

LayoutBlock
LayoutBlockProps

SplitBlock
SplitBlockProps

spacingVariants
marginVariants, paddingVariants

backgroundColorVariants
textColorVariants, borderColorVariants

widthVariants, heightVariants
positionVariants

fontSizeVariants, fontWeightVariants
textAlignVariants, lineHeightVariants

roundedVariants, shadowVariants
borderVariants

ThemeProvider
ThemeProviderProps

useTheme()
ThemeContextValue

modernUITheme
ThemeConfig

useMediaQuery(query)
boolean

useMobile()
boolean

useViewport()
ViewportSize

Source Files

Effects Variants

Typography Variants

Layout Variants

Color Variants

Spacing Variants

defined in

defined in

defined in

defined in

defined in

defined in

defined in

defined in

defined in

defined in

defined in

defined in

defined in

defined in

defined in

defined in

p, px, py, pt, pb, pl, pr
Type: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'

m, mx, my, mt, mb, ml, mr
Type: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'auto'

bg
Type: 'background' | 'card' | 'primary' | 'secondary' | etc.

c
Type: 'foreground' | 'primary' | 'secondary' | 'muted' | etc.

borderColor
Type: 'border' | 'input' | 'primary' | etc.

w
Type: 'auto' | 'full' | 'screen' | 'fit' | 'min' | 'max'

h, minH
Type: 'auto' | 'full' | 'screen' | 'fit' | 'min'

maxW
Type: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | etc.

position
Type: 'relative' | 'absolute' | 'fixed' | 'sticky'

size
Type: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | etc.

weight
Type: 'normal' | 'medium' | 'semibold' | 'bold'

align
Type: 'left' | 'center' | 'right' | 'justify'

leading
Type: 'none' | 'tight' | 'snug' | 'normal' | 'relaxed' | 'loose'

rounded
Type: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'

shadow
Type: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'

border
Type: '1px solid border' | '2px solid border' | etc.

src/core/variants/spacing.ts
paddingVariants, marginVariants

src/core/variants/colors.ts
backgroundColorVariants, textColorVariants

src/core/variants/layout.ts
widthVariants, heightVariants, positionVariants

src/core/variants/typography.ts
fontSizeVariants, fontWeightVariants

src/core/variants/effects.ts
roundedVariants, shadowVariants, borderVariants

Output

Variant Resolution

Primitive Layer

Component Layer

Developer API

forwards spacing & effects

applies button variants

applies base variants

  p='md'
  rounded='lg'
  variant='primary'
  size='md'
/>

Button
src/components/ui/Button.tsx

BaseButtonProps extends
- ButtonHTMLAttributes
- Spacing variants
- Effects variants
- Custom: variant, size

Box
src/core/ui/Box.tsx

BoxProps extends
- HTMLAttributes
- All variant props
- component prop

CVA Engine
class-variance-authority

Generated classes:
'p-4 rounded-lg'
+ button-specific classes

  class='...'
  data-class='button'
/>

// Button receives spacing and effects variants from Box
<Button 
  p="md"           // forwarded to Box → paddingVariants
  rounded="lg"     // forwarded to Box → roundedVariants
  variant="primary" // Button-specific prop
  size="md"        // Button-specific prop
/>

// Card receives all Block variants
<Card 
  p="xl"           // forwarded to Block → paddingVariants
  shadow="md"      // forwarded to Block → shadowVariants
  rounded="2xl"    // forwarded to Block → roundedVariants
  bg="card"        // forwarded to Block → backgroundColorVariants
/>

// Text receives Box variants plus typography variants
<Text 
  size="lg"        // Text-specific typography variant
  weight="bold"    // Text-specific typography variant
  c="primary"      // forwarded to Box → textColorVariants
  mb="md"          // forwarded to Box → marginVariants
/>

Layout Component Props

UI Component Props

Core Component Props

Variant Types

Base Types

React.HTMLAttributes

React.ComponentPropsWithRef

React.ForwardRefExoticComponent

SpacingProps
from paddingVariants, marginVariants
VariantProps

ColorProps
from backgroundColorVariants, textColorVariants
VariantProps

LayoutProps
from widthVariants, heightVariants
VariantProps

TypographyProps
from fontSizeVariants, fontWeightVariants
VariantProps

EffectsProps
from roundedVariants, shadowVariants
VariantProps

BoxProps extends
HTMLAttributes & SpacingProps
& ColorProps & LayoutProps
& EffectsProps & TypographyProps

BlockProps extends
BoxProps & { component?: 'section' | 'article' | ... }

GridProps extends
BlockProps & { cols?: number, gap?: string }

FlexProps extends
BoxProps & { direction?: 'row' | 'column' }

StackProps extends
BoxProps & { gap?: string, direction?: 'vertical' | 'horizontal' }

BaseButtonProps extends
ButtonHTMLAttributes & SpacingProps
& EffectsProps & { variant, size, ... }

CardProps extends
BlockProps & { variant?: string }

TextProps extends
BoxProps & TypographyProps
& { as?: 'p' | 'span' | ... }

TitleProps extends
BoxProps & TypographyProps
& { order: 1 | 2 | 3 | 4 | 5 | 6 }

DashLayoutProps extends
{ sidebar, header, children, ... }

LayoutBlockProps extends
BlockProps & { layout?: 'default' | 'grid' | 'flex' }

SplitBlockProps extends
{ left, right, ratio?, ... }

// Export: ThemeProvider
// Interface: ThemeProviderProps
interface ThemeProviderProps {
  theme: ThemeConfig;
  children: ReactNode;
  defaultMode?: 'light' | 'dark' | 'system';
  storageKey?: string;
}

// Export: useTheme
// Returns: ThemeContextValue
interface ThemeContextValue {
  isDarkMode: boolean;
  toggleDarkMode: () => void;
  setDarkMode: (enabled: boolean) => void;
  mode: 'light' | 'dark' | 'system';
  setMode: (mode: 'light' | 'dark' | 'system') => void;
  preferences: ThemePreferences;
  updatePreferences: (preferences: Partial<ThemePreferences>) => void;
}

// Export: modernUITheme
// Type: ThemeConfig
interface ThemeConfig {
  name: string;
  displayName: string;
  description: string;
  author: string;
  version: string;
  colors: ColorScheme;
  typography: TypographyConfig;
  spacing: SpacingConfig;
  effects: EffectsConfig;
}

import { useMediaQuery, useMobile, useViewport } from '@ui8kit/core';

function ResponsiveComponent() {
  const isMobile = useMobile();
  const isSmall = useMediaQuery('(max-width: 640px)');
  const { width, height } = useViewport();
  
  return <Box>{isMobile ? 'Mobile' : 'Desktop'}</Box>;
}

// Defined in: src/components/ui/Button.tsx
export const buttonStyleVariants = cva('', {
  variants: {
    variant: {
      default: 'bg-primary text-primary-foreground hover:bg-primary/90',
      destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
      outline: 'border border-input bg-background hover:bg-accent',
      secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
      ghost: 'hover:bg-accent hover:text-accent-foreground',
      link: 'text-primary underline-offset-4 hover:underline'
    }
  }
});

export const buttonSizeVariants = cva('', {
  variants: {
    size: {
      sm: 'h-8 px-3 text-sm',
      md: 'h-10 px-4 text-base',
      lg: 'h-12 px-6 text-lg',
      icon: 'h-10 w-10'
    }
  }
});

// Defined in: src/components/ui/Card.tsx
export const cardVariants = cva('', {
  variants: {
    variant: {
      default: 'bg-card text-card-foreground',
      outlined: 'border border-border bg-card text-card-foreground'
    }
  }
});

// Targeting in tests or stylesheets
const button = document.querySelector('[data-class="button"]');

// CSS targeting
[data-class="card"] {
  /* Custom styles */
}