### Install Lake UI Package (Bash)

Source: https://context7.com/timtran1/lake-ui/llms.txt

This command installs the Lake UI package using npm. Ensure you have Node.js and npm (or yarn) installed in your environment before running this command.

```bash
# Install the package
npm install @deepsel/lake-ui

```

--------------------------------

### Install Lake UI Peer Dependencies

Source: https://context7.com/timtran1/lake-ui/llms.txt

Installs the necessary peer dependencies for the Lake UI React component library. This includes React, ReactDOM, and FontAwesome components.

```bash
npm install react react-dom @fortawesome/react-fontawesome @fortawesome/free-solid-svg-icons
```

--------------------------------

### Button Component Example - React

Source: https://context7.com/timtran1/lake-ui/llms.txt

Demonstrates the usage of the Button component from '@deepsel/lake-ui'. Includes examples of handling click events, setting loading states, applying custom styles and classes, and enabling hover effects. This component is built with React and TypeScript.

```tsx
import { Button } from '@deepsel/lake-ui'
import { useState } from 'react'

function LoginForm() {
  const [loading, setLoading] = useState(false)

  const handleSubmit = async (e: React.MouseEvent) => {
    e.preventDefault()
    setLoading(true)
    try {
      await fetch('/api/login', { method: 'POST' })
      console.log('Login successful')
    } catch (error) {
      console.error('Login failed:', error)
    } finally {
      setLoading(false)
    }
  }

  return (
    <div>
      <Button
        onClick={handleSubmit}
        hoverEffect={true}
        className="custom-btn"
        style={{ width: '100%', padding: '1rem' }}
      >
        {loading ? 'Logging in...' : 'Login'}
      </Button>

      <Button
        onClick={() => window.location.href = '/signup'}
        hoverEffect={false}
      >
        Sign Up
      </Button>
    </div>
  )
}
```

--------------------------------

### Toast Component Example in React

Source: https://context7.com/timtran1/lake-ui/llms.txt

Illustrates the use of the Toast component for displaying non-blocking notifications. This example shows how to trigger success, error, info, and persistent toasts with customizable positioning (corners), auto-dismissal, and styling.

```tsx
import { Toast, Button } from '@deepsel/lake-ui'
import { useState } from 'react'

function NotificationSystem() {
  const [successOpen, setSuccessOpen] = useState(false)
  const [errorOpen, setErrorOpen] = useState(false)
  const [infoOpen, setInfoOpen] = useState(false)
  const [persistentOpen, setPersistentOpen] = useState(false)

  const saveData = async () => {
    try {
      await fetch('/api/save', { method: 'POST' })
      setSuccessOpen(true)
    } catch (error) {
      setErrorOpen(true)
    }
  }

  return (
    <div>
      <Button onClick={saveData}>Save Changes</Button>
      <Button onClick={() => setInfoOpen(true)}>Show Info</Button>
      <Button onClick={() => setPersistentOpen(true)}>Important Message</Button>

      <Toast
        useOpen={[successOpen, setSuccessOpen]}
        timeOut={3000}
        className="toast-success"
        style={{ backgroundColor: '#10b981', color: 'white', padding: '1rem' }}
      >
        <strong>Success!</strong> Your changes have been saved.
      </Toast>

      <Toast
        useOpen={[errorOpen, setErrorOpen]}
        timeOut={5000}
        bottom={true}
        className="toast-error"
        style={{ backgroundColor: '#ef4444', color: 'white' }}
      >
        <strong>Error:</strong> Failed to save changes. Please try again.
      </Toast>

      <Toast
        useOpen={[infoOpen, setInfoOpen]}
        left={true}
        bottom={true}
        timeOut={4000}
        style={{ backgroundColor: '#3b82f6', color: 'white' }}
      >
        New features are now available! Check them out.
      </Toast>

      <Toast
        useOpen={[persistentOpen, setPersistentOpen]}
        disableAutoClose={true}
        left={true}
        style={{ backgroundColor: '#f59e0b', color: 'white', padding: '1.5rem' }}
      >
        <h4>Important Update</h4>
        <p>System maintenance scheduled for tonight at 2 AM.</p>
      </Toast>
    </div>
  )
}

```

--------------------------------

### Dialog Component Example in React

Source: https://context7.com/timtran1/lake-ui/llms.txt

Demonstrates the usage of the Dialog component for creating modal overlays. It includes examples for a user creation form and a confirmation dialog for deleting all users. The Dialog component supports click-outside-to-dismiss behavior and can be controlled via state.

```tsx
import { Dialog, Button, Input } from '@deepsel/lake-ui'
import { useState } from 'react'

function UserManagement() {
  const [createOpen, setCreateOpen] = useState(false)
  const [confirmOpen, setConfirmOpen] = useState(false)
  const [userData, setUserData] = useState({ name: '', email: '' })

  const handleCreate = async () => {
    try {
      const response = await fetch('/api/users', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(userData)
      })
      if (response.ok) {
        console.log('User created successfully')
        setCreateOpen(false)
        setUserData({ name: '', email: '' })
      }
    } catch (error) {
      console.error('Failed to create user:', error)
    }
  }

  return (
    <div>
      <Button onClick={() => setCreateOpen(true)}>Create User</Button>
      <Button onClick={() => setConfirmOpen(true)}>Delete All</Button>

      <Dialog useOpen={[createOpen, setCreateOpen]}>
        <div style={{ padding: '2rem', minWidth: '400px' }}>
          <h2>Create New User</h2>
          <Input
            value={userData.name}
            onChange={(e) => setUserData({ ...userData, name: e.target.value })}
            placeholder="Full Name"
            style={{ marginBottom: '1rem', width: '100%' }}
          />
          <Input
            value={userData.email}
            onChange={(e) => setUserData({ ...userData, email: e.target.value })}
            placeholder="Email Address"
            type="email"
            style={{ marginBottom: '1rem', width: '100%' }}
          />
          <div style={{ display: 'flex', gap: '1rem' }}>
            <Button onClick={handleCreate}>Create</Button>
            <Button onClick={() => setCreateOpen(false)}>Cancel</Button>
          </div>
        </div>
      </Dialog>

      <Dialog
        useOpen={[confirmOpen, setConfirmOpen]}
        disableCloseBtn={true}
        style={{ padding: '2rem' }}
      >
        <h3>Confirm Action</h3>
        <p>Are you sure you want to delete all users? This cannot be undone.</p>
        <div style={{ display: 'flex', gap: '1rem', marginTop: '1.5rem' }}>
          <Button onClick={() => { console.log('Deleted'); setConfirmOpen(false); }}>
            Delete All
          </Button>
          <Button onClick={() => setConfirmOpen(false)}>Cancel</Button>
        </div>
      </Dialog>
    </div>
  )
}

```

--------------------------------

### Input Component Example - React

Source: https://context7.com/timtran1/lake-ui/llms.txt

Illustrates the use of the Input component from '@deepsel/lake-ui'. Shows how to manage input values, handle focus effects, and integrate with form validation logic. The component is implemented using React and TypeScript, supporting standard input props.

```tsx
import { Input } from '@deepsel/lake-ui'
import { useState } from 'react'

function UserProfile() {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [errors, setErrors] = useState<Record<string, string>>({})

  const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setEmail(e.target.value)
    if (errors.email) {
      setErrors({ ...errors, email: '' })
    }
  }

  const validateForm = () => {
    const newErrors: Record<string, string> = {}
    if (!email.includes('@')) newErrors.email = 'Invalid email'
    if (password.length < 8) newErrors.password = 'Password too short'
    setErrors(newErrors)
    return Object.keys(newErrors).length === 0
  }

  return (
    <form onSubmit={(e) => { e.preventDefault(); validateForm(); }}>
      <Input
        value={email}
        onChange={handleEmailChange}
        focusEffect={true}
        placeholder="Email address"
        type="email"
        className="mb-4"
      />
      {errors.email && <span className="error">{errors.email}</span>}

      <Input
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        focusEffect={false}
        placeholder="Password"
        type="password"
      />
      {errors.password && <span className="error">{errors.password}</span>}
    </form>
  )
}
```

--------------------------------

### Dropdown and DropdownItem Component Usage in React

Source: https://context7.com/timtran1/lake-ui/llms.txt

Illustrates the use of Dropdown and DropdownItem components for creating interactive menus in React applications. It includes examples of custom toggle rendering, menu positioning, and action handling. Dependencies include @deepsel/lake-ui.

```tsx
import { Dropdown, DropdownItem, Button } from '@deepsel/lake-ui'
import { useState } from 'react'

function UserMenu() {
  const [user, setUser] = useState({ name: 'Jane Smith', role: 'Admin' })

  const handleMenuAction = (action: string) => {
    console.log(`Menu action: ${action}`)
    switch (action) {
      case 'logout':
        setUser(null)
        window.location.href = '/login'
        break
      case 'profile':
        window.location.href = '/profile'
        break
    }
  }

  return (
    <div className="app-header">
      <Dropdown
        renderToggle={
          <Button style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
            <img src="/avatar.jpg" alt="Avatar" style={{ width: 32, height: 32, borderRadius: '50%' }} />
            <span>{user.name}</span>
          </Button>
        }
        onOpen={() => console.log('Menu opened')}
        onClose={() => console.log('Menu closed')}
      >
        <DropdownItem
          onClick={() => handleMenuAction('profile')}
          style={{ padding: '0.75rem 1rem' }}
        >
          View Profile
        </DropdownItem>
        <DropdownItem onClick={() => handleMenuAction('settings')}> 
          Settings
        </DropdownItem>
        <DropdownItem onClick={() => handleMenuAction('help')}> 
          Help & Support
        </DropdownItem>
        <DropdownItem
          onClick={() => handleMenuAction('logout')}
          hoverClass="hover-danger"
          style={{ borderTop: '1px solid #e5e7eb' }}
        >
          Logout
        </DropdownItem>
      </Dropdown>

      <Dropdown
        renderToggle={<Button>Actions</Button>}
        top={true}
        left={true}
      >
        <DropdownItem onClick={() => console.log('Export')}>Export Data</DropdownItem>
        <DropdownItem onClick={() => console.log('Import')}>Import Data</DropdownItem>
        <DropdownItem onClick={() => console.log('Refresh')}>Refresh</DropdownItem>
      </Dropdown>
    </div>
  )
}

```

--------------------------------

### Checkbox Component Example - React

Source: https://context7.com/timtran1/lake-ui/llms.txt

Demonstrates the configuration and usage of the Checkbox component from '@deepsel/lake-ui'. Shows how to manage checked states, attach change handlers, provide labels, and render custom icons using FontAwesome. This component is built with React and TypeScript.

```tsx
import { Checkbox } from '@deepsel/lake-ui'
import { useState } from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faHeart } from '@fortawesome/free-solid-svg-icons'

function SettingsPanel() {
  const [settings, setSettings] = useState({
    notifications: false,
    newsletter: true,
    favorites: false
  })

  const handleChange = (key: string) => (e: React.ChangeEvent<HTMLInputElement>) => {
    setSettings({ ...settings, [key]: e.target.checked })
    console.log(`${key} set to:`, e.target.checked)
  }

  return (
    <div>
      <Checkbox
        checked={settings.notifications}
        onChange={handleChange('notifications')}
        label="Enable push notifications"
        className="setting-item"
      />

      <Checkbox
        checked={settings.newsletter}
        onChange={handleChange('newsletter')}
        label="Subscribe to newsletter"
      />

      <Checkbox
        checked={settings.favorites}
        onChange={handleChange('favorites')}
        icon={<FontAwesomeIcon icon={faHeart} />}
        label="Add to favorites"
        style={{ marginTop: '1rem' }}
      />
    </div>
  )
}
```

--------------------------------

### SideDrawer Component Usage in React

Source: https://context7.com/timtran1/lake-ui/llms.txt

Illustrates the implementation of the SideDrawer component for slide-in navigation. It supports left and right placement, a semi-transparent overlay, and click-outside-to-close functionality. The example shows how to manage the open/closed state using React's useState hook and integrate with the TopBar.

```tsx
import { SideDrawer, Button, TopBar } from '@deepsel/lake-ui'
import { useState } from 'react'

function AppWithSidebar() {
  const [leftOpen, setLeftOpen] = useState(false)
  const [rightOpen, setRightOpen] = useState(false)

  return (
    <div className="app">
      <TopBar>
        <Button onClick={() => setLeftOpen(true)}>Menu</Button>
        <Button onClick={() => setRightOpen(true)}>Settings</Button>
      </TopBar>

      <SideDrawer
        useOpen={[leftOpen, setLeftOpen]}
        className="main-nav"
        style={{ width: '280px', padding: '2rem' }}
      >
        <nav>
          <h2>Navigation</h2>
          <ul>
            <li><a href="/home" onClick={() => setLeftOpen(false)}>Home</a></li>
            <li><a href="/profile" onClick={() => setLeftOpen(false)}>Profile</a></li>
            <li><a href="/settings" onClick={() => setLeftOpen(false)}>Settings</a></li>
            <li><a href="/help" onClick={() => setLeftOpen(false)}>Help</a></li>
          </ul>
        </nav>
      </SideDrawer>

      <SideDrawer
        useOpen={[rightOpen, setRightOpen]}
        right={true}
        style={{ width: '320px', padding: '1.5rem' }}
      >
        <h3>Quick Settings</h3>
        <div className="settings-content">
          <p>Theme, notifications, and more...</p>
          <Button onClick={() => setRightOpen(false)}>Close</Button>
        </div>
      </SideDrawer>

      <main>Application content here</main>
    </div>
  )
}
```

--------------------------------

### Use Lake UI Components in a React Application

Source: https://context7.com/timtran1/lake-ui/llms.txt

Demonstrates how to import and utilize various components from the Lake UI library within a React application. It showcases state management for dialogs and toasts, tab navigation, and basic form elements.

```tsx
import {
  Button,
  Input,
  Dialog,
  Tabs,
  TabPanel,
  Card,
  Toast,
  TranslateAnimation
} from '@deepsel/lake-ui'
import { useState } from 'react'

function App() {
  const [dialogOpen, setDialogOpen] = useState(false)
  const [toastOpen, setToastOpen] = useState(false)
  const [tabIndex, setTabIndex] = useState(0)

  return (
    <div className="app">
      <TranslateAnimation to="right" duration={0.8}>
        <Card style={{ padding: '2rem', maxWidth: '600px', margin: '2rem auto' }}>
          <h1>Welcome to Lake UI</h1>

          <Input
            placeholder="Enter your email"
            focusEffect={true}
            style={{ width: '100%', marginBottom: '1rem' }}
          />

          <Button onClick={() => setDialogOpen(true)}>
            Open Dialog
          </Button>

          <Button onClick={() => setToastOpen(true)}>
            Show Toast
          </Button>

          <Tabs
            tabs={['Tab 1', 'Tab 2', 'Tab 3']}
            useCurrentTabIndex={[tabIndex, setTabIndex]}
            style={{ marginTop: '2rem' }}
          />

          <TabPanel index={0} currentTabIndex={tabIndex}>
            <p>Content for Tab 1</p>
          </TabPanel>
          <TabPanel index={1} currentTabIndex={tabIndex}>
            <p>Content for Tab 2</p>
          </TabPanel>
          <TabPanel index={2} currentTabIndex={tabIndex}>
            <p>Content for Tab 3</p>
          </TabPanel>
        </Card>
      </TranslateAnimation>

      <Dialog useOpen={[dialogOpen, setDialogOpen]}>
        <div style={{ padding: '2rem' }}>
          <h2>Dialog Title</h2>
          <p>This is a modal dialog with smooth animations.</p>
          <Button onClick={() => setDialogOpen(false)}>Close</Button>
        </div>
      </Dialog>

      <Toast useOpen={[toastOpen, setToastOpen]} timeOut={3000}>
        <p>This is a toast notification!</p>
      </Toast>
    </div>
  )
}

export default App

```

--------------------------------

### Tabs and TabPanel Component Usage in React

Source: https://context7.com/timtran1/lake-ui/llms.txt

Demonstrates how to use the Tabs and TabPanel components for creating a tabbed interface in a React application. It manages tab state and renders content within respective panels. Dependencies include @deepsel/lake-ui.

```tsx
import { Tabs, TabPanel, Card } from '@deepsel/lake-ui'
import { useState } from 'react'

function UserDashboard() {
  const [tabIndex, setTabIndex] = useState(0)
  const [profileData, setProfileData] = useState({
    overview: { posts: 42, followers: 1234 },
    activity: [{ action: 'Posted', time: '2h ago' }],
    settings: { theme: 'dark', notifications: true }
  })

  return (
    <div className="dashboard">
      <Tabs
        tabs={['Overview', 'Activity', 'Settings', 'Help']}
        useCurrentTabIndex={[tabIndex, setTabIndex]}
        className="dashboard-tabs"
        style={{ marginBottom: '2rem' }}
      />

      <TabPanel index={0} currentTabIndex={tabIndex}>
        <Card style={{ padding: '2rem' }}>
          <h2>Account Overview</h2>
          <div className="stats-grid">
            <div>
              <p>Total Posts</p>
              <h3>{profileData.overview.posts}</h3>
            </div>
            <div>
              <p>Followers</p>
              <h3>{profileData.overview.followers}</h3>
            </div>
          </div>
        </Card>
      </TabPanel>

      <TabPanel index={1} currentTabIndex={tabIndex}>
        <Card style={{ padding: '2rem' }}>
          <h2>Recent Activity</h2>
          <ul>
            {profileData.activity.map((item, i) => (
              <li key={i}>
                {item.action} - {item.time}
              </li>
            ))}
          </ul>
        </Card>
      </TabPanel>

      <TabPanel index={2} currentTabIndex={tabIndex}>
        <Card style={{ padding: '2rem' }}>
          <h2>Settings</h2>
          <p>Theme: {profileData.settings.theme}</p>
          <p>Notifications: {profileData.settings.notifications ? 'On' : 'Off'}</p>
        </Card>
      </TabPanel>

      <TabPanel index={3} currentTabIndex={tabIndex}>
        <Card style={{ padding: '2rem' }}>
          <h2>Help & Support</h2>
          <p>Contact us at support@example.com</p>
        </Card>
      </TabPanel>

      <Tabs
        tabs={['Tab A', 'Tab B']}
        useCurrentTabIndex={[tabIndex, setTabIndex]}
        tabless={true}
      >
        <TabPanel index={0} currentTabIndex={tabIndex}>Hidden tabs content A</TabPanel>
        <TabPanel index={1} currentTabIndex={tabIndex}>Hidden tabs content B</TabPanel>
      </Tabs>
    </div>
  )
}

```

--------------------------------

### Switch Component: Toggle UI Elements with Customization

Source: https://context7.com/timtran1/lake-ui/llms.txt

Demonstrates the usage of the Switch component for creating toggleable UI elements. It shows how to customize ON/OFF text, icons, and control the size of the switch. This component is useful for user preferences and settings.

```tsx
import { Switch } from '@deepsel/lake-ui'
import { useState } from 'react'

function AppSettings() {
  const [darkMode, setDarkMode] = useState(false)
  const [autoSave, setAutoSave] = useState(true)
  const [soundEnabled, setSoundEnabled] = useState(true)

  const handleDarkModeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const isChecked = e.target.checked
    setDarkMode(isChecked)
    document.body.classList.toggle('dark-mode', isChecked)
    localStorage.setItem('darkMode', isChecked.toString())
  }

  return (
    <div className="settings-grid">
      <div className="setting-row">
        <label>Dark Mode</label>
        <Switch
          checked={darkMode}
          onChange={handleDarkModeChange}
          renderEnabled="ON"
          renderDisabled="OFF"
          size="large"
        />
      </div>

      <div className="setting-row">
        <label>Auto-save</label>
        <Switch
          checked={autoSave}
          onChange={(e) => setAutoSave(e.target.checked)}
          renderEnabled="✓"
          renderDisabled="✗"
          size="medium"
        />
      </div>

      <div className="setting-row">
        <label>Sound</label>
        <Switch
          checked={soundEnabled}
          onChange={(e) => setSoundEnabled(e.target.checked)}
          size="small"
          className="custom-switch"
        />
      </div>
    </div>
  )
}
```

--------------------------------

### TopBar Component Usage in React

Source: https://context7.com/timtran1/lake-ui/llms.txt

Demonstrates how to use the TopBar component for semantic navigation headers. It includes a logo, navigation links, and user section with a logout button. This component is part of the @deepsel/lake-ui library.

```tsx
import { TopBar, Button } from '@deepsel/lake-ui'
import { useState } from 'react'

function AppLayout() {
  const [user, setUser] = useState({ name: 'John Doe', avatar: '/avatar.jpg' })

  return (
    <div>
      <TopBar
        className="main-nav"
        style={{
          display: 'flex',
          justifyContent: 'space-between',
          padding: '1rem 2rem',
          backgroundColor: '#fff',
          borderBottom: '1px solid #e5e7eb'
        }}
      >
        <div className="logo">
          <img src="/logo.svg" alt="Logo" height="40" />
        </div>

        <nav className="nav-links">
          <a href="/dashboard">Dashboard</a>
          <a href="/products">Products</a>
          <a href="/analytics">Analytics</a>
        </nav>

        <div className="user-section">
          <img src={user.avatar} alt={user.name} className="avatar" />
          <span>{user.name}</span>
          <Button onClick={() => setUser(null)}>Logout</Button>
        </div>
      </TopBar>

      <main>{/* Page content */}</main>
    </div>
  )
}
```

--------------------------------

### useIsInViewport Hook for Lazy Loading (TypeScript/React)

Source: https://context7.com/timtran1/lake-ui/llms.txt

The useIsInViewport hook leverages the Intersection Observer API to detect when an element becomes visible in the viewport. This is crucial for implementing lazy loading strategies, improving initial page load performance by only loading content when it's needed.

```tsx
import { useIsInViewport } from '@deepsel/lake-ui'
import { useRef, useEffect, useState } from 'react'

function LazyLoadedSection() {
  const sectionRef = useRef<HTMLDivElement>(null)
  const isVisible = useIsInViewport(sectionRef)
  const [data, setData] = useState(null)
  const [hasLoaded, setHasLoaded] = useState(false)

  useEffect(() => {
    if (isVisible && !hasLoaded) {
      fetch('/api/data')
        .then(res => res.json())
        .then(data => {
          setData(data)
          setHasLoaded(true)
          console.log('Data loaded when section became visible')
        })
    }
  }, [isVisible, hasLoaded])

  return (
    <div ref={sectionRef} style={{ minHeight: '100vh', padding: '2rem' }}>
      {isVisible ? (
        <div>
          <h2>Section is visible!</h2>
          {data ? (
            <pre>{JSON.stringify(data, null, 2)}</pre>
          ) : (
            <p>Loading data...</p>
          )}
        </div>
      ) : (
        <p>Scroll down to load this section...</p>
      )}
    </div>
  )
}

function AnimatedCounter() {
  const counterRef = useRef<HTMLDivElement>(null)
  const isInViewport = useIsInViewport(counterRef)
  const [count, setCount] = useState(0)

  useEffect(() => {
    if (isInViewport && count < 100) {
      const timer = setTimeout(() => setCount(count + 1), 20)
      return () => clearTimeout(timer)
    }
  }, [isInViewport, count])

  return (
    <div ref={counterRef} style={{ fontSize: '3rem', textAlign: 'center' }}>
      {count}%
    </div>
  )
}

```

--------------------------------

### Card Component: Group Content with Optional Hover Effects

Source: https://context7.com/timtran1/lake-ui/llms.txt

Showcases the Card component, a versatile container for organizing related content. It supports hover effects for visual feedback (elevation and shadow) and is suitable for dashboard elements, information summaries, or general content grouping.

```tsx
import { Card, Button } from '@deepsel/lake-ui'

function DashboardCards() {
  const metrics = [
    { title: 'Total Users', value: 1234, change: '+12%' },
    { title: 'Revenue', value: '$45.2K', change: '+8%' },
    { title: 'Active Sessions', value: 892, change: '-3%' }
  ]

  return (
    <div className="dashboard-grid">
      {metrics.map((metric, index) => (
        <Card
          key={index}
          hoverEffect={true}
          className="metric-card"
          style={{ padding: '2rem', textAlign: 'center' }}
        >
          <h3>{metric.title}</h3>
          <p className="value">{metric.value}</p>
          <span className="change">{metric.change}</span>
        </Card>
      ))}

      <Card
        hoverEffect={false}
        className="static-card"
        style={{ padding: '1.5rem' }}
      >
        <h4>Quick Actions</h4>
        <Button onClick={() => console.log('Export')}>Export Data</Button>
        <Button onClick={() => console.log('Refresh')}>Refresh</Button>
      </Card>
    </div>
  )
}
```

--------------------------------

### FadeAnimation Component for Entry Effects (TypeScript/React)

Source: https://context7.com/timtran1/lake-ui/llms.txt

The FadeAnimation component applies a fade-in effect to its children. It allows customization of opacity, duration, and delay. This component is useful for animating elements as they appear on the screen, enhancing user experience by providing smooth transitions.

```tsx
import { FadeAnimation, Card } from '@deepsel/lake-ui'

function ContentSection() {
  return (
    <div className="content-container">
      <FadeAnimation
        opacityStart={0}
        opacityEnd={1}
        duration={1.5}
        delay={0}
      >
        <h1>Our Services</h1>
      </FadeAnimation>

      <div className="services-grid">
        {[1, 2, 3, 4].map((item, index) => (
          <FadeAnimation
            key={item}
            opacityStart={0}
            opacityEnd={1}
            duration={0.8}
            delay={index * 0.15}
          >
            <Card style={{ padding: '1.5rem' }}>
              <h3>Service {item}</h3>
              <p>Description of service {item}</p>
            </Card>
          </FadeAnimation>
        ))}
      </div>

      <FadeAnimation
        opacityStart={0.3}
        opacityEnd={1}
        duration={2}
        delay={1}
        style={{ marginTop: '4rem' }}
      >
        <img src="/banner.jpg" alt="Banner" style={{ width: '100%' }} />
      </FadeAnimation>

      <FadeAnimation
        duration={1.2}
        delay={0.5}
      >
        <footer>
          <p>&copy; 2025 Your Company. All rights reserved.</p>
        </footer>
      </FadeAnimation>
    </div>
  )
}

```

--------------------------------

### Slider Component: Image and Content Carousel with Controls

Source: https://context7.com/timtran1/lake-ui/llms.txt

Illustrates the use of the Slider component for creating image and content carousels. It highlights features like automatic playback, navigation controls (customizable buttons), and pausing on hover. This is ideal for product galleries or promotional banners.

```tsx
import { Slider } from '@deepsel/lake-ui'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons'

function ProductGallery() {
  const products = [
    { id: 1, image: '/images/product1.jpg', title: 'Product 1' },
    { id: 2, image: '/images/product2.jpg', title: 'Product 2' },
    { id: 3, image: '/images/product3.jpg', title: 'Product 3' },
    { id: 4, image: '/images/product4.jpg', title: 'Product 4' }
  ]

  return (
    <div className="product-showcase">
      <Slider
        autoPlay={true}
        delay={5000}
        pauseOnHover={true}
        insetControls={true}
        renderNext={(nextFunc) => (
          <button onClick={nextFunc} className="custom-nav-btn">
            <FontAwesomeIcon icon={faChevronRight} />
          </button>
        )}
        renderPrev={(prevFunc) => (
          <button onClick={prevFunc} className="custom-nav-btn">
            <FontAwesomeIcon icon={faChevronLeft} />
          </button>
        )}
        style={{ maxWidth: '800px', height: '500px' }}
      >
        {products.map(product => (
          <div key={product.id} className="slide-content">
            <img src={product.image} alt={product.title} />
            <h3>{product.title}</h3>
          </div>
        ))}
      </Slider>

      <Slider
        disableButtons={true}
        autoPlay={false}
        className="thumbnail-slider"
      >
        {products.map(product => (
          <img key={product.id} src={product.image} alt={product.title} />
        ))}
      </Slider>
    </div>
  )
}
```

--------------------------------

### TextSlide Component: Animate Text on Viewport Entry (React)

Source: https://context7.com/timtran1/lake-ui/llms.txt

The TextSlide component from @deepsel/lake-ui animates text into view when it enters the viewport. It supports configurable delay, duration, and direction (top, bottom, left, right). Styles can be applied directly or via className.

```tsx
import { TextSlide } from '@deepsel/lake-ui'

function LandingPage() {
  return (
    <section className="hero">
      <TextSlide
        delay={100}
        duration="1000ms"
        style={{ fontSize: '3rem', fontWeight: 'bold', marginBottom: '1rem' }}
      >
        Welcome to Our Platform
      </TextSlide>

      <TextSlide
        delay={300}
        duration="800ms"
        bottom={true}
      >
        Build amazing applications with our component library
      </TextSlide>

      <TextSlide
        delay={500}
        duration="600ms"
        left={true}
        style={{ marginTop: '2rem' }}
      >
        Get started today
      </TextSlide>

      <div style={{ marginTop: '100vh' }}>
        <TextSlide
          top={true}
          delay={0}
          duration="1200ms"
        >
          Scroll to see more animations
        </TextSlide>
      </div>
    </section>
  )
}
```

--------------------------------

### TypingAnimation Component: Typewriter Effect (React)

Source: https://context7.com/timtran1/lake-ui/llms.txt

The TypingAnimation component from @deepsel/lake-ui creates a typewriter effect for text. It allows customization of cursor and text colors, typing speed (stepDuration), and repeat behavior. It is triggered on viewport entry and can be styled using the style prop or className.

```tsx
import { TypingAnimation } from '@deepsel/lake-ui'

function IntroSection() {
  return (
    <div className="intro-container">
      <TypingAnimation
        cursorColor="#3b82f6"
        textColor="#1f2937"
        stepDuration={0.08}
        repeat={true}
        style={{ fontSize: '2rem', fontWeight: '500' }}
      >
        Welcome to the future of web development...
      </TypingAnimation>

      <div style={{ marginTop: '3rem' }}>
        <TypingAnimation
          cursorColor="#10b981"
          textColor="#059669"
          stepDuration={0.05}
          repeat={false}
          className="code-snippet"
        >
        npm install @deepsel/lake-ui
      </TypingAnimation>
      </div>

      <div style={{ marginTop: '2rem' }}>
        <TypingAnimation
          stepDuration={0.06}
          style={{ fontFamily: 'monospace', fontSize: '1.2rem' }}
        >
          Building beautiful UIs has never been easier.
      </TypingAnimation>
      </div>
    </div>
  )
}
```

--------------------------------

### TranslateAnimation Component: Directional Slide with Fade (React)

Source: https://context7.com/timtran1/lake-ui/llms.txt

The TranslateAnimation component from @deepsel/lake-ui provides a directional slide-in animation with an optional fade effect. It is configurable with direction (to: 'right', 'top', 'bottom', 'left'), duration, distance, delay, and repeat mode. It can be used to animate various elements, including custom components like Card.

```tsx
import { TranslateAnimation, Card } from '@deepsel/lake-ui'

function FeaturesSection() {
  const features = [
    { title: 'Fast', description: 'Lightning-fast performance' },
    { title: 'Modern', description: 'Built with latest technologies' },
    { title: 'Flexible', description: 'Customize to your needs' }
  ]

  return (
    <div className="features-grid">
      {features.map((feature, index) => (
        <TranslateAnimation
          key={index}
          to="right"
          duration={0.8}
          distance="100px"
          delay={index * 0.2}
          mask={true}
        >
          <Card style={{ padding: '2rem', height: '200px' }}>
            <h3>{feature.title}</h3>
            <p>{feature.description}</p>
          </Card>
        </TranslateAnimation>
      ))}

      <TranslateAnimation
        to="top"
        duration={1.2}
        distance="50%"
        repeat={true}
        style={{ marginTop: '4rem' }}
      >
        <img src="/hero-image.jpg" alt="Hero" style={{ width: '100%' }} />
      </TranslateAnimation>

      <TranslateAnimation
        to="bottom"
        duration={0.6}
        distance="30px"
        delay={0.5}
      >
        <p>Scroll down to see more content animate into view</p>
      </TranslateAnimation>

      <TranslateAnimation
        to="left"
        duration={1}
        distance="200px"
        mask={false}
      >
        <div className="cta-section">
          <h2>Ready to get started?</h2>
        </div>
      </TranslateAnimation>
    </div>
  )
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.