### Install Ling Design System Core Packages

Source: https://context7.com/tangxiaoy-ui/ling.design/llms.txt

Installs the core, configuration, and utility packages for the Ling Design System using pnpm. This is the initial setup step for integrating the library into a project.

```bash
pnpm install @ling-design/core @ling-design/config @ling-design/utils
```

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

### Basic StandardPage Usage in React

Source: https://github.com/tangxiaoy-ui/ling.design/blob/main/ling-design-integration-skill/SKILL.md

Demonstrates the fundamental usage of the StandardPage component for creating a basic page layout. This is the recommended starting point for most standard pages.

```tsx
import { StandardPage } from '@ling-design/core';

function MyPage() {
  return (
    <StandardPage
      pageTitle="页面标题"
      showLevel1Menu={false}
      showLevel2Menu={false}
      showToolbarIcons={false}
    >
      {/* Your content here */}
    </StandardPage>
  );
}
```

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

### Advanced StandardPage Configuration with DataNav and Tabs in React

Source: https://github.com/tangxiaoy-ui/ling.design/blob/main/ling-design-integration-skill/SKILL.md

Illustrates an advanced configuration of StandardPage, incorporating left-side navigation (DataNav) and tabbed content (NavTabs). This example showcases conditional rendering and dynamic data handling capabilities.

```tsx
import { StandardPage, NavTabs } from '@ling-design/core';

function AdvancedPage() {
  return (
    <StandardPage
      pageTitle="数据管理"
      showLevel2Menu={true}
      level2Menu={
        <NavTabs
          variant="card"
          items={[
            { label: "列表", value: "list" },
            { label: "详情", value: "detail" },
          ]}
        />
      }
      showDataNav={true}
      dataNavProps={{
        items: [
          { id: '1', label: '分类一', value: 'cat1' },
          { id: '2', label: '分类二', value: 'cat2' },
        ],
        title: "数据分类",
        width: 240,
      }}
    >
      {/* Page content */}
    </StandardPage>
  );
}
```

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

### Switch Component Examples (React)

Source: https://context7.com/tangxiaoy-ui/ling.design/llms.txt

Shows the Switch component for toggle controls. Supports both controlled and uncontrolled modes, with options for size and disabled states. Includes an example with an associated label.

```tsx
import { Switch } from "@ling-design/core"

// Uncontrolled with default value
<Switch defaultChecked onCheckedChange={(checked) => console.log(checked)} />

// Controlled switch
const [enabled, setEnabled] = useState(false)

<Switch
  checked={enabled}
  onCheckedChange={setEnabled}
/>

// Small size variant
<Switch size="sm" defaultChecked />

// Disabled state
<Switch disabled checked />

// With label using flexbox
<div className="flex items-center gap-2">
  <Switch id="notifications" />
  <label htmlFor="notifications">Enable notifications</label>
</div>
```

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

### ListToolbar Component Examples (React)

Source: https://context7.com/tangxiaoy-ui/ling.design/llms.txt

Provides examples of the ListToolbar component, designed for list or table interfaces. Includes search, filter, sort controls, action buttons, and view toggles. Demonstrates basic and full-featured configurations.

```tsx
import { ListToolbar, Button } from "@ling-design/core"

// Basic toolbar with search
<ListToolbar
  searchPlaceholder="Search by title"
  onSearch={(value) => console.log("Search:", value)}
/>

// Full-featured toolbar
const [viewMode, setViewMode] = useState<"list" | "grid">("list")

<ListToolbar
  searchPlaceholder="Search items..."
  onSearch={handleSearch}
  showFilter={true}
  onFilter={() => setFilterOpen(true)}
  showSort={true}
  onSort={() => setSortOpen(true)}
  actions={
    <>
      <Button variant="outline">Export</Button>
      <Button>Create New</Button>
    </>
  }
  showViewToggle={true}
  viewMode={viewMode}
  onViewModeChange={setViewMode}
  showSettings={true}
  onSettings={() => setSettingsOpen(true)}
/>

// Minimal toolbar
<ListToolbar
  onSearch={handleSearch}
  showFilter={false}
  showSort={false}
  showViewToggle={false}
  showSettings={false}
  actions={<Button size="sm">Add Item</Button>}
/>
```

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

### DataNav Component Examples (React)

Source: https://context7.com/tangxiaoy-ui/ling.design/llms.txt

Demonstrates the DataNav component for creating tree-like navigation panels. Features include search, expandable folders, active state management, and customizable width. Accepts data in a nested array format.

```tsx
import { DataNav } from "@ling-design/core"

const navItems = [
  {
    key: "projects",
    label: "Projects",
    children: [
      { key: "proj-1", label: "Project Alpha" },
      { key: "proj-2", label: "Project Beta" },
      {
        key: "archived",
        label: "Archived",
        children: [
          { key: "proj-old", label: "Legacy Project" },
        ],
      },
    ],
  },
  {
    key: "templates",
    label: "Templates",
    children: [
      { key: "tmpl-1", label: "Basic Template" },
      { key: "tmpl-2", label: "Advanced Template" },
    ],
  },
  { key: "settings", label: "Settings" },
]

// Basic data navigation
<DataNav
  title="Navigation"
  items={navItems}
  activeKey="proj-1"
  onSelect={(key) => setSelectedItem(key)}
/>

// With search and custom width
<DataNav
  title="File Explorer"
  items={navItems}
  activeKey={selectedKey}
  defaultOpenKeys={["projects"]}
  onSelect={handleSelect}
  width={280}
  showSearch={true}
/>

// Without search
<DataNav
  title="Categories"
  items={navItems}
  showSearch={false}
  width="100%"
/>
```

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

### StandardPage Component Layout Examples

Source: https://context7.com/tangxiaoy-ui/ling.design/llms.txt

The StandardPage component provides a comprehensive page layout including header, sidebar, content area, toolbar, table, and pagination. It's designed as a starting point for enterprise pages and can be customized with specific content.

```tsx
import {
  StandardPage,
  Header,
  Sidebar,
  Button,
} from "@ling-design/core"

// Complete standard page layout
<StandardPage
  header={
    <Header
      variant="admin"
      logo={<Logo />}
      menuItems={globalMenu}
      user={currentUser}
    />
  }
  sidebar={
    <Sidebar
      title="Menu"
      items={sidebarItems}
      activeKey={activeMenu}
      onSelect={setActiveMenu}
    />
  }
  pageHeaderProps={{
    title: "Data Management",
    tabs: [
      { key: "all", label: "All Data" },
      { key: "active", label: "Active" },
      { key: "archived", label: "Archived" },
    ],
    activeTab: "all",
    onTabChange: setActiveTab,
  }}
  showLevel1Menu={true}
  showLevel2Menu={true}
  level2Menu={<SecondaryNav />}
  showDataNav={true}
  dataNavProps={{
    title: "Categories",
    items: categoryTree,
    activeKey: selectedCategory,
    onSelect: setSelectedCategory,
    width: 240,
  }}
  listToolbarProps={{
    onSearch: handleSearch,
    showFilter: true,
    onFilter: openFilter,
    actions: <Button>Create</Button>,
  }}
  tableProps={{
    columns: tableColumns,
    dataSource: tableData,
    rowKey: "id",
  }}
  paginationProps={{
    current: page,
    pageSize: pageSize,
    total: totalCount,
    onChange: handlePageChange,
  }}
/>

// Simplified standard page with custom content
<StandardPage
  header={<Header />}
  pageHeaderProps={{ title: "Custom Content Page" }}
  showDataNav={false}
>
  <div className="p-6">
    <h2>Custom Content Here</h2>
    <p>Any React components can be rendered inside StandardPage</p>
  </div>
</StandardPage>
```

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

### Ling Design Input Component Examples

Source: https://context7.com/tangxiaoy-ui/ling.design/llms.txt

Demonstrates the various configurations for the Input component, including basic usage, inputs with icons (like search), password and email types, custom styling via `className`, and the disabled state. It utilizes Tailwind CSS for styling.

```tsx
import { Input } from "@ling-design/core"
import { Search } from "@ling-design/core"

// Basic input
<Input placeholder="Enter your name" />

// Input with search icon
<Input
  placeholder="Search..."
  icon={<Search size={16} />}
/>

// Password input
<Input type="password" placeholder="Enter password" />

// Email input with custom styling
<Input
  type="email"
  placeholder="email@example.com"
  className="w-full max-w-sm"
/>

// Disabled state
<Input placeholder="Disabled input" disabled />
```

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

### NavTabs Component Examples (React)

Source: https://context7.com/tangxiaoy-ui/ling.design/llms.txt

Demonstrates the NavTabs component for creating tabbed navigation. Supports multiple variants like line, card, button, and vertical. Can be used with an items array or custom children.

```tsx
import { NavTabs } from "@ling-design/core"

const tabs = [
  { label: "Overview", value: "overview" },
  { label: "Analytics", value: "analytics" },
  { label: "Reports", value: "reports" },
  { label: "Settings", value: "settings", disabled: true },
]

// Line variant (default) - underline indicator
<NavTabs items={tabs} value="overview" onValueChange={setActiveTab} />

// Card variant - background highlight
<NavTabs variant="card" items={tabs} value="overview" />

// Button variant - bordered toggle buttons
<NavTabs variant="button" items={tabs} defaultValue="overview" />

// Vertical variant - sidebar-style tabs
<NavTabs
  variant="vertical"
  items={tabs}
  value={activeTab}
  onValueChange={setActiveTab}
  className="w-48"
/>

// With custom children instead of items
<NavTabs variant="line">
  <button data-state="active">Tab 1</button>
  <button data-state="inactive">Tab 2</button>
</NavTabs>
```

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

### Badge Component Examples (React)

Source: https://context7.com/tangxiaoy-ui/ling.design/llms.txt

Illustrates the Badge component for displaying status indicators or labels. Offers various semantic variants (primary, secondary, success, warning, error, draft, destructive, outline) for different contexts.

```tsx
import { Badge } from "@ling-design/core"

// Default (primary) badge
<Badge>New</Badge>

// Secondary badge
<Badge variant="secondary">Pending</Badge>

// Status badges
<Badge variant="success">Approved</Badge>
<Badge variant="warning">Review</Badge>
<Badge variant="error">Failed</Badge>
<Badge variant="draft">Draft</Badge>

// Destructive badge
<Badge variant="destructive">Deleted</Badge>

// Outline badge
<Badge variant="outline">Info</Badge>

// With custom styling
<Badge variant="success" className="text-xs px-1">
  Active
</Badge>
```

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

### Custom Page Layout Composition in React

Source: https://github.com/tangxiaoy-ui/ling.design/blob/main/ling-design-integration-skill/SKILL.md

Shows how to build a custom page layout by composing individual Ling Design components when the StandardPage component does not meet specific requirements. This offers maximum flexibility.

```tsx
import { Header, PageHeader, Table, Button } from '@ling-design/core';

function CustomPage() {
  return (
    <div>
      <Header />
      <PageHeader
        title="自定义页面"
        breadcrumbs={[{ label: '首页', href: '/' }, { label: '自定义' }]}
        actions={<Button>新建</Button>}
      />
      <div className="p-6">
        <Table {/* ... */ } />
      </div>
    </div>
  );
}
```

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

### PageHeader Component Examples

Source: https://context7.com/tangxiaoy-ui/ling.design/llms.txt

The PageHeader component displays a page title and optional tabs for sub-navigation. It supports various configurations including title-only, tabs, extra actions, and hiding tabs.

```tsx
import { PageHeader, Button } from "@ling-design/core"

// Basic page header with title only
<PageHeader title="Dashboard" />

// With tabs navigation
<PageHeader
  title="User Management"
  tabs={[
    { key: "list", label: "User List" },
    { key: "roles", label: "Roles" },
    { key: "permissions", label: "Permissions" },
  ]}
  activeTab="list"
  onTabChange={(key) => setActiveSection(key)}
/>

// With extra actions
<PageHeader
  title="Reports"
  tabs={reportTabs}
  activeTab={activeTab}
  onTabChange={setActiveTab}
  extra={
    <Button variant="link" className="text-primary">
      New User Guide
    </Button>
  }
  showExtra={true}
/>

// Without tabs
<PageHeader
  title="Settings"
  showTabs={false}
  extra={<span className="text-muted-foreground">Last updated: Today</span>}
/>
```

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

### Icon System Usage Examples

Source: https://context7.com/tangxiaoy-ui/ling.design/llms.txt

The Ling Design system provides over 150 SVG icons that can be used with consistent sizing and styling. Icons accept a `size` prop and standard SVG attributes, allowing for customization of appearance and behavior.

```tsx
import {
  Search,
  Edit,
  Delete,
  ArrowLeft,
  ArrowRight,
  Setting,
  User,
  Folder,
  File,
  Download,
  Upload,
  Tick,
  Cross,
  Information,
  HomePage,
  Calendar,
  Time,
  Lock,
  Unlock,
} from "@ling-design/core"

// Basic icon usage
<Search size={16} />
<Edit size={18} />
<Delete size={20} className="text-destructive" />

// Icons in buttons
<Button>
  <ArrowLeft size={14} className="mr-2" />
  Back
</Button>

// Icon with custom color
<Information size={16} className="text-primary" />

// Icons in navigation
<nav className="flex gap-4">
  <HomePage size={20} />
  <Setting size={20} />
  <User size={20} />
</nav>

// All icons support standard SVG props
<Folder
  size={24}
  fill="currentColor"
  className="opacity-50"
  onClick={() => openFolder()}
/>
```

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

### Ling Design System Development Commands

Source: https://context7.com/tangxiaoy-ui/ling.design/llms.txt

Provides essential commands for managing the Ling Design System monorepo using pnpm and Turborepo. These commands cover dependency installation, running development tasks, building, linting, and formatting.

```bash
pnpm install
pnpm dev
pnpm build
pnpm lint
pnpm format
```

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

### React Component Generation with Ling Design Tokens and Icons (TypeScript/Tailwind CSS)

Source: https://github.com/tangxiaoy-ui/ling.design/blob/main/component-creator/SKILL.md

This snippet demonstrates the generation of a React component using TypeScript and Tailwind CSS, adhering to Ling Design's token system for styling and importing icons from `@ling-design/core`. It highlights the usage of CSS classes derived from design tokens for properties like background color, padding, and typography, and shows how to import and use icons, including a placeholder for missing icons.

```typescript
import React from 'react';
import { IconName, StopIcon } from '@ling-design/core'; // Assuming StopIcon is the placeholder

interface MyComponentProps {
  text: string;
  icon?: IconName; // Or a specific type for icon names
}

const MyComponent: React.FC<MyComponentProps> = ({ text, icon }) => {
  const IconComponent = icon ? /* logic to map icon name to actual component */ : StopIcon;

  return (
    <div className="p-ling-medium bg-ling-background border-ling-radius-small flex items-center space-x-ling-small">
      {IconComponent && <IconComponent className="w-ling-icon-medium h-ling-icon-medium" />}
      <span className="text-ling-body-regular text-ling-text-primary">
        {text}
      </span>
    </div>
  );
};

export default MyComponent;

```

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

### Ling Design Header Component Variants

Source: https://context7.com/tangxiaoy-ui/ling.design/llms.txt

Illustrates the implementation of the Header component, offering two distinct variants: `admin` with a fixed primary color background and `portal` which supports light and dark modes. It shows how to configure the logo, menu items, and user profile sections.

```tsx
import { Header } from "@ling-design/core"

// Admin variant - fixed primary color background
<Header
  variant="admin"
  logo={<img src="/logo.png" alt="Logo" className="h-8" />}
  menuItems={[
    { label: "Dashboard", href: "/dashboard", active: true },
    { label: "Knowledge Center", href: "/knowledge" },
    { label: "AI Platform", href: "/ai" },
    { label: "Low Code", href: "/lowcode" },
  ]}
  user={{
    name: "Admin",
    avatar: "A",  // First letter shown if no image
  }}
/>

// Portal variant with light mode
<Header
  variant="portal"
  mode="light"
  logo={<img src="/logo-dark.png" alt="Logo" className="h-8" />}
  menuItems={[
    { label: "Home", href: "/", active: true },
    { label: "Products", href: "/products" },
  ]}
  user={{ name: "John Doe", avatar: "J" }}
/>

// Portal variant with dark mode (default)
<Header
  variant="portal"
  mode="dark"
  logo={<Logo />}
  menuItems={menuItems}
  user={currentUser}
/>
```

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

### Using CSS Custom Properties with Tailwind CSS

Source: https://context7.com/tangxiaoy-ui/ling.design/llms.txt

Demonstrates how to leverage CSS custom properties (design tokens) defined in `@ling-design/config` within a Tailwind CSS configuration and component usage. This ensures consistent theming across the application. Available tokens include colors, border radii, and spacing.

```tsx
// tailwind.config.js extends these tokens
// Available color tokens:
// - primary, primary-foreground
// - secondary, secondary-foreground
// - destructive, destructive-foreground
// - success, success-foreground
// - warning, warning-foreground
// - muted, muted-foreground
// - accent, accent-foreground
// - background, foreground
// - border, input, ring
// - card, card-foreground
// - popover, popover-foreground

// Using tokens in components
<div className="bg-background text-foreground border-border">
  <h1 className="text-primary">Primary Heading</h1>
  <p className="text-muted-foreground">Muted description text</p>
  <button className="bg-destructive text-destructive-foreground">
    Delete
  </button>
</div>

// Border radius tokens: sm, md, lg
<div className="rounded-sm" />   // calc(var(--radius) - 4px)
<div className="rounded-md" />   // calc(var(--radius) - 2px)
<div className="rounded-lg" />   // var(--radius)

// Spacing follows standard Tailwind scale
// Small: 4px, Standard: 8px, Large: 16px, Extra Large: 32px

```

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

### Pagination Component - Page Navigation Controls

Source: https://context7.com/tangxiaoy-ui/ling.design/llms.txt

The Pagination component provides controls for navigating through large datasets. It supports page navigation, quick jumpers, page size changes, and a refresh button. It requires total item count and page size, and can be controlled via state.

```tsx
import { Pagination } from "@ling-design/core"

// Basic pagination
<Pagination
  total={100}
  pageSize={10}
  current={1}
  onChange={(page, pageSize) => {
    console.log("Page:", page, "PageSize:", pageSize)
  }}
/>

// Controlled pagination with all features
const [current, setCurrent] = useState(1)
const [pageSize, setPageSize] = useState(10)

<Pagination
  current={current}
  pageSize={pageSize}
  total={500}
  pageSizeOptions={[10, 20, 50, 100]}
  showSizeChanger={true}
  showQuickJumper={true}
  showRefresh={true}
  onChange={(page, size) => {
    setCurrent(page)
    setPageSize(size)
    fetchData(page, size)
  }}
  onShowSizeChange={(current, size) => {
    console.log("Size changed to:", size)
  }}
  onRefresh={() => {
    fetchData(current, pageSize)
  }}
/>

// Minimal pagination (no extra controls)
<Pagination
  total={50}
  showSizeChanger={false}
  showQuickJumper={false}
  showRefresh={false}
/>
```

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

### Sidebar Component - Basic and Collapsible Navigation

Source: https://context7.com/tangxiaoy-ui/ling.design/llms.txt

The Sidebar component offers a collapsible navigation menu with hierarchical item support. It includes features like expand/collapse animations, active state tracking, and keyboard navigation. Dependencies include core Ling Design components.

```tsx
import { Sidebar } from "@ling-design/core"
import { HomePage, Setting, User } from "@ling-design/core"

const menuItems = [
  {
    key: "dashboard",
    label: "Dashboard",
    icon: <HomePage size={18} />,
  },
  {
    key: "users",
    label: "User Management",
    icon: <User size={18} />,
    children: [
      { key: "user-list", label: "User List" },
      { key: "user-roles", label: "Roles & Permissions" },
    ],
  },
  {
    key: "settings",
    label: "Settings",
    icon: <Setting size={18} />,
  },
]

// Basic sidebar
<Sidebar
  title="Menu Title"
  items={menuItems}
  activeKey="dashboard"
  onSelect={(key) => console.log("Selected:", key)}
/>

// With collapsed state management
const [collapsed, setCollapsed] = useState(false)

<Sidebar
  title="Admin Panel"
  items={menuItems}
  activeKey={activeMenu}
  defaultOpenKeys={["users"]}
  collapsed={collapsed}
  onCollapse={setCollapsed}
  onSelect={handleMenuSelect}
/>
```

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

### Ling Design Button Component Usage

Source: https://context7.com/tangxiaoy-ui/ling.design/llms.txt

Demonstrates the usage of the Button component from the Ling Design System's core library. It showcases various variants (default, destructive, outline, ghost, link), size options (sm, default, lg, icon), and polymorphic rendering using the `asChild` prop for composition.

```tsx
import { Button } from "@ling-design/core"

// Primary action button
<Button variant="default">Submit</Button>

// Destructive action (delete, cancel)
<Button variant="destructive">Delete</Button>

// Outlined button for secondary actions
<Button variant="outline">Cancel</Button>

// Ghost button for subtle interactions
<Button variant="ghost">More Options</Button>

// Link-styled button
<Button variant="link">Learn More</Button>

// Size variations
<Button size="sm">Small</Button>
<Button size="default">Default</Button>  // px-2 py-1
<Button size="lg">Large</Button>
<Button size="icon">+</Button>  // 32x32px icon button

// Polymorphic rendering with Radix Slot
<Button asChild>
  <a href="/dashboard">Go to Dashboard</a>
</Button>
```

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

### Utility Function `cn` for Class Merging

Source: https://context7.com/tangxiaoy-ui/ling.design/llms.txt

The `cn` utility function from `@ling-design/utils` is used for merging Tailwind CSS classes with proper precedence handling. It simplifies conditional class application and ensures correct styling.

```tsx
import { cn } from "@ling-design/utils"

// Basic class merging
<div className={cn("p-4 bg-white", "rounded-lg shadow")} />

// Conditional classes
<button
  className={cn(
    "px-4 py-2 rounded",
    isActive && "bg-primary text-white",
    isDisabled && "opacity-50 cursor-not-allowed"
  )}
>
  Click Me
</button>

// Override conflicting classes (last wins)
<div className={cn("p-2", "p-4")} />  // Results in p-4

// With variant props
const buttonClass = cn(
  "inline-flex items-center justify-center rounded",
  variant === "primary" && "bg-primary text-primary-foreground",
  variant === "outline" && "border border-input bg-transparent",
  size === "sm" && "h-8 px-3 text-sm",
  size === "lg" && "h-12 px-6 text-lg"
)
```

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

### Table Component - Data Display with Customization

Source: https://context7.com/tangxiaoy-ui/ling.design/llms.txt

The Table component displays data in a tabular format with support for column definitions, custom cell rendering, and styling options like borders and striping. It requires column configurations and a data source. Custom rendering can be achieved via the 'render' prop.

```tsx
import { Table, Badge, Button } from "@ling-design/core"

interface User {
  id: string
  name: string
  email: string
  status: "active" | "inactive" | "pending"
  role: string
}

const columns = [
  { title: "Name", dataIndex: "name", width: 150 },
  { title: "Email", dataIndex: "email" },
  {
    title: "Status",
    dataIndex: "status",
    render: (value: string) => (
      <Badge variant={value === "active" ? "success" : value === "pending" ? "warning" : "draft"}>
        {value}
      </Badge>
    ),
  },
  { title: "Role", dataIndex: "role", align: "center" as const },
  {
    title: "Actions",
    key: "actions",
    align: "right" as const,
    render: (_: any, record: User) => (
      <div className="flex gap-2 justify-end">
        <Button variant="ghost" size="sm">Edit</Button>
        <Button variant="ghost" size="sm">Delete</Button>
      </div>
    ),
  },
]

const data: User[] = [
  { id: "1", name: "John Doe", email: "john@example.com", status: "active", role: "Admin" },
  { id: "2", name: "Jane Smith", email: "jane@example.com", status: "pending", role: "Editor" },
]

// Basic table
<Table columns={columns} dataSource={data} rowKey="id" />

// With borders
<Table columns={columns} dataSource={data} rowKey="id" bordered />

// With striped rows
<Table columns={columns} dataSource={data} rowKey="id" striped />

// With custom row key function
<Table
  columns={columns}
  dataSource={data}
  rowKey={(record) => record.email}
  bordered
  striped
/>
```

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