Component Library Documentation

This library provides a comprehensive set of React components for building modern web applications with a cyberpunk-inspired design system.

Table of Contents

• Installation
• Components
  • Alert
  • Box Components
  • Button
  • Card
  • Container
  • Drawer
  • Graphs
  • Input
  • Menu
  • NavBar
  • SecurityScoreCard
  • Select
  • Sidebar
  • Table
  • Terminal
  • ThemeToggle
  • Timeline

Installation

npm install vmfl-ui-kit

Theme Provider

Wrap your application with the ThemeProvider to enable theming:

import { ThemeProvider } from 'vmfl-ui-kit'

function App() {
  return (
    <ThemeProvider>
      <YourApp />
    </ThemeProvider>
  )
}

Components

Alert

A flexible alert component for displaying messages and notifications.

import { Alert, AlertHeading, AlertContent, AlertDetails } from 'vmfl-ui-kit'

<Alert 
  variant="info"               // 'default' | 'info' | 'success' | 'warning' | 'error'
  onClose={() => {}}          // Optional close handler
>
  <AlertHeading>Title</AlertHeading>
  <AlertContent>Message content</AlertContent>
  <AlertDetails>Additional details</AlertDetails>
</Alert>

Box Components

Box

Basic container with bracket corners.

import { Box } from 'vmfl-ui-kit'

<Box 
  fullHeight={false}          // Optional full height
  className=""                // Optional additional classes
>
  Content
</Box>

GridBox

Container with a subtle grid background pattern.

import { GridBox } from 'vmfl-ui-kit'

<GridBox 
  borderSize={1}             // Optional border size
  className=""               // Optional additional classes
>
  Content
</GridBox>

RivetBox

Container with customizable corner rivets.

import { RivetBox } from 'vmfl-ui-kit'

<RivetBox 
  corners={['top-right']}    // Array of corner positions
  borderSize={1}             // Optional border size
  rivetColor=""              // Optional rivet color
  rivetStyle="bordered"      // 'bordered' | 'solid'
  rounded={false}            // Optional rounded corners
>
  Content
</RivetBox>

Button

Standard and progress-enabled buttons.

import { Button, ProgressButton } from 'vmfl-ui-kit'

// Standard Button
<Button 
  variant="solid"            // 'solid' | 'outline' | 'ghost' | 'dotted'
  color="gray"               // 'gray' | 'red' | 'yellow' | 'green' | 'blue' | 'purple' | 'cyan'
  size="md"                  // 'sm' | 'md' | 'lg'
  icon={Icon}                // Optional Lucide icon
  iconPosition="left"        // 'left' | 'right'
  disabled={false}           // Optional disabled state
  rounded={false}            // Optional rounded corners
  circular={false}           // Optional circular shape
  fullWidth={false}          // Optional full width
>
  Button Text
</Button>

// Progress Button
<ProgressButton 
  loading={true}             // Loading state
  progress={75}              // Progress percentage
  // ... same props as Button
>
  Loading...
</ProgressButton>

Card

Flexible card component with multiple sections.

import { 
  Card, 
  CardTitle, 
  CardSubtitle, 
  CardContent, 
  CardFooter 
} from 'vmfl-ui-kit'

<Card>
  <CardTitle>Title</CardTitle>
  <CardSubtitle>Subtitle</CardSubtitle>
  <CardContent>Main content</CardContent>
  <CardFooter>Footer content</CardFooter>
</Card>

Container

Layout component with optional sidebar.

import { Container } from 'vmfl-ui-kit'

<Container 
  sidebar={<SidebarContent />}   // Optional sidebar component
  sidebarPosition="left"         // 'left' | 'right'
  fullHeight={false}             // Optional full height
>
  Main content
</Container>

Drawer

Sliding panel component.

import { 
  Drawer, 
  DrawerHeader, 
  DrawerContent, 
  DrawerFooter 
} from 'vmfl-ui-kit'

<Drawer 
  open={true}                    // Control visibility
  onClose={() => {}}            // Close handler
  anchor="left"                  // 'left' | 'right' | 'top' | 'bottom'
  width="400px"                 // Optional width
  height="100vh"                // Optional height
  closeOnOutsideClick={true}    // Optional close on outside click
>
  <DrawerHeader>Header</DrawerHeader>
  <DrawerContent>Content</DrawerContent>
  <DrawerFooter>Footer</DrawerFooter>
</Drawer>

Graphs

Various data visualization components.

import { 
  BarGraph,
  LineGraph,
  PieGraph,
  DonutGraph,
  RadarGraph,
  RadialBarGraph,
  StackedBarGraph,
  HeatmapGraph
} from 'vmfl-ui-kit'

// Bar Graph
<BarGraph 
  data={[
    { name: 'A', value: 10, color: 'blue' },
    { name: 'B', value: 20, color: 'green' }
  ]}
  variant="solid"                // 'solid' | 'outlined'
  grid={false}                   // Optional grid
  height={400}                   // Optional height
/>

// Line Graph
<LineGraph 
  data={[
    { name: 'A', value: 10, color: 'blue' },
    { name: 'B', value: 20, color: 'green' }
  ]}
  variant="solid"                // 'solid' | 'outlined'
  lineStyle="solid"              // 'solid' | 'dashed' | 'dotted'
  showPoints={true}              // Optional point markers
/>

// Pie Graph
<PieGraph 
  data={[
    { name: 'A', value: 30, color: 'blue' },
    { name: 'B', value: 70, color: 'green' }
  ]}
  pieStyle="solid"               // 'solid' | 'outlined'
  showLegend={true}              // Optional legend
  legendPosition="right"         // 'right' | 'bottom'
/>

Input

Text input component.

import { Input } from 'vmfl-ui-kit'

<Input 
  type="text"                    // HTML input type
  variant="default"              // 'default' | 'outlined' | 'ghost'
  color="default"                // 'default' | 'error' | 'warning' | 'success' | 'info'
  size="md"                      // 'sm' | 'md' | 'lg'
  disabled={false}               // Optional disabled state
  readOnly={false}               // Optional read-only state
  required={false}               // Optional required state
  error={false}                  // Optional error state
  placeholder="Enter text..."    // Optional placeholder
/>

Menu

Dropdown menu component.

import { Menu, MenuItem } from 'vmfl-ui-kit'

<Menu 
  variant="default"              // 'default' | 'dropdown'
  label="Menu"                   // Menu label
  icon={Icon}                    // Optional Lucide icon
>
  <MenuItem 
    icon={Icon}                  // Optional item icon
    disabled={false}             // Optional disabled state
  >
    Menu Item
  </MenuItem>
</Menu>

NavBar

Navigation bar component.

import { NavBar, NavItem, NavMenu, NavActions } from 'vmfl-ui-kit'

<NavBar 
  position="fixed"               // 'fixed' | 'relative'
  attachTo="top"                 // 'top' | 'bottom'
  brand="Brand Name"             // Optional brand/logo
>
  <NavItem 
    icon={Icon}                  // Optional icon
    active={false}               // Optional active state
    disabled={false}             // Optional disabled state
  >
    Nav Item
  </NavItem>
  <NavMenu 
    icon={Icon}                  // Optional icon
    label="Menu"                 // Menu label
  >
    Menu items
  </NavMenu>
  <NavActions>
    Action buttons
  </NavActions>
</NavBar>

SecurityScoreCard

Security status display component.

import { SecurityScoreCard } from 'vmfl-ui-kit'

<SecurityScoreCard 
  score={85}                     // Security score (0-100)
  vulnerabilities={5}            // Number of vulnerabilities
  criticalIssues={2}            // Number of critical issues
  borderSize={1}                // Optional border size
/>

Select

Dropdown select component.

import { Select } from 'vmfl-ui-kit'

<Select 
  size="md"                      // 'sm' | 'md' | 'lg'
  disabled={false}               // Optional disabled state
  placeholder="Select..."        // Optional placeholder
  error={false}                  // Optional error state
>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</Select>

Sidebar

Navigation sidebar component.

import { Sidebar, SidebarItem } from 'vmfl-ui-kit'

<Sidebar 
  collapsed={false}              // Optional collapsed state
  onCollapsedChange={() => {}}  // Collapse handler
  fullHeight={false}             // Optional full height
  selectedColor="blue"           // Optional active item color
  showToggle={true}             // Optional collapse toggle
>
  <SidebarItem 
    icon={Icon}                  // Optional icon
    disabled={false}             // Optional disabled state
    active={false}               // Optional active state
  >
    Sidebar Item
  </SidebarItem>
</Sidebar>

Table

Data table component.

import { Table, Thead, Tbody, Tr, Th, Td } from 'vmfl-ui-kit'

<Table 
  variant="outline"              // 'outline' | 'simple' | 'inverted'
  color="default"                // 'default' | color name
  rounded={false}                // Optional rounded corners
  hover={true}                   // Optional hover effects
  striped={false}                // Optional striped rows
  compact={false}                // Optional compact style
>
  <Thead>
    <Tr>
      <Th>Header</Th>
    </Tr>
  </Thead>
  <Tbody>
    <Tr>
      <Td>Cell</Td>
    </Tr>
  </Tbody>
</Table>

Terminal

Interactive terminal component.

import { Terminal, useTerminalCommands } from 'vmfl-ui-kit'

const { history, handleCommand } = useTerminalCommands({
  // Command definitions
})

<Terminal 
  history={history}              // Terminal history
  onCommand={handleCommand}      // Command handler
  prompt="user@system:~$"        // Optional custom prompt
  promptColor="default"          // Optional prompt color
  textColor="default"            // Optional text color
  promptDisabled={false}         // Optional disabled state
  detached={true}                // Optional floating window
  title="TERMINAL.SYS"           // Optional window title
/>

ThemeToggle

Theme switching component.

import { ThemeToggle } from 'vmfl-ui-kit'

<ThemeToggle />

Timeline

Progress timeline component.

import { Timeline, TIMELINE_STATES } from 'vmfl-ui-kit'

<Timeline 
  nodes={[
    { 
      state: TIMELINE_STATES.COMPLETED,  // State of the node
      label: "Step 1"                    // Node label
    },
    { 
      state: TIMELINE_STATES.ACTIVE,
      label: "Step 2"
    }
  ]}
/>

CSS Variables

The component library uses CSS variables for theming. Here are the key variables:

:root {
  --background: #ffffff;
  --foreground: #000000;
  
  /* Semantic colors */
  --semantic-default: #6b7280;
  --semantic-info: #3b82f6;
  --semantic-success: #22c55e;
  --semantic-warning: #f59e0b;
  --semantic-error: #ef4444;
  
  /* Additional colors */
  --semantic-grey: #9ca3af;
  --semantic-white: #ffffff;
  --semantic-black: #000000;
}

Best Practices

1. Always wrap your application with ThemeProvider
2. Use semantic color variants when possible
3. Maintain consistent spacing using the provided container components
4. Follow the component composition patterns shown in examples
5. Leverage the built-in responsive design features

Contributing

Please refer to CONTRIBUTING.md for guidelines on how to contribute to this library.

License

This library is licensed under the MIT License.