### Clone LiftKit Template Project

Source: https://github.com/chainlift/liftkit/blob/main/README.md

Clones the LiftKit template project to quickly set up a Next.js environment with LiftKit Core's config files pre-installed. This is the fastest way to get started.

```bash
git clone https://github.com/Chainlift/liftkit-template.git
cd liftkit-template
npm install
# Install components as needed
# Import LiftKit's CSS into your app's globals.css:
# @import url("@/lib/css/index.css");
```

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

### Initialize LiftKit CLI

Source: https://context7.com/chainlift/liftkit/llms.txt

Commands to install the LiftKit CLI, initialize the project configuration, and add UI components to your Next.js application.

```bash
npm install @chainlift/liftkit --save-dev
npx liftkit init
npm run add all
npm run add button
npm run add card
npm run add badge
```

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

### TextInput Component Examples (React/TypeScript)

Source: https://context7.com/chainlift/liftkit/llms.txt

Demonstrates the TextInput component for creating input fields with label positioning options, help text, and icon support. Includes examples for floating labels and custom background colors.

```tsx
import TextInput from "@/registry/nextjs/components/text-input";

// Basic input
<TextInput name="Username" placeholder="Enter username" />

// Label on input (floating label style)
<TextInput
  name="Email"
  labelPosition="on-input"
  placeholder="name@example.com"
/>

// With help text
<TextInput
  name="Password"
  helpText="Must be at least 8 characters"
/>

// Custom end icon
<TextInput
  name="Search"
  endIcon="search"
  placeholder="Search..."
/>

// With background color for floating label
<TextInput
  name="Amount"
  labelPosition="on-input"
  labelBackgroundColor="surfacecontainer"
/>
```

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

### Grid Component Examples (React/TypeScript)

Source: https://context7.com/chainlift/liftkit/llms.txt

Illustrates the responsive Grid component for creating layouts with configurable columns and gap spacing. Supports auto-responsiveness and custom class overrides.

```tsx
import Grid from "@/registry/nextjs/components/grid";

// Basic 2-column grid
<Grid columns={2}>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</Grid>

// Multi-column with gap
<Grid columns={3} gap="lg">
  <Card>Card 1</Card>
  <Card>Card 2</Card>
  <Card>Card 3</Card>
</Grid>

// Auto-responsive grid
<Grid columns={4} gap="md" autoResponsive>
  {items.map(item => <Card key={item.id}>{item.name}</Card>)}
</Grid>

// Custom grid with className override
<Grid className="custom-grid-layout" gap="sm">
  <div style={{ gridColumn: "span 2" }}>Wide item</div>
  <div>Normal item</div>
</Grid>
```

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

### Apply CSS Utility Classes

Source: https://context7.com/chainlift/liftkit/llms.txt

Examples of applying LiftKit utility classes for background colors, text colors, margins, shadows, overflow, and flexbox layouts.

```tsx
<div className="bg-primary">Primary background</div>
<span className="color-primary">Primary text</span>
<div className="m-bottom-md m-top-lg">Vertical margins</div>
<Card className="shadow-sm">Subtle shadow</Card>
<div className="flex-h gap-sm">Horizontal flex</div>
```

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

### Add LiftKit to Existing Next.js Project

Source: https://github.com/chainlift/liftkit/blob/main/README.md

Installs LiftKit CLI as a dev dependency and initializes LiftKit in an existing Next.js project. This process adds necessary configuration files like `components.json` and `tailwind.config.ts`.

```bash
npm install @chainlift/liftkit --save-dev
npx liftkit init
# If prompted, add an 'add' script to package.json and install shadcn
# Install components as needed
# Import LiftKit's CSS into your app's globals.css:
# @import url("@/lib/css/index.css");
```

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

### Use Button Component

Source: https://context7.com/chainlift/liftkit/llms.txt

Examples of the Button component showing support for variants, sizes, semantic colors, and Lucide icon integration.

```tsx
import Button from "@/registry/nextjs/components/button";

<Button label="Click me" />
<Button label="Primary" variant="fill" color="primary" />
<Button label="Small" size="sm" />
<Button label="Search" startIcon="search" />
<Button label="Success" color="success" />
<Button label="Custom Hover" color="primary" stateLayerOverride={{ bgColor: "tertiary" }} />
```

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

### Badge Component Examples (React/TypeScript)

Source: https://context7.com/chainlift/liftkit/llms.txt

Demonstrates the usage of the Badge component for displaying icons with customizable colors, sizes, and stroke widths. It automatically calculates contrasting text/icon colors.

```tsx
import Badge from "@/registry/nextjs/components/badge";

// Basic badge
<Badge icon="star" />

// Colored badges
<Badge icon="check" color="success" />
<Badge icon="alert-triangle" color="warning" />
<Badge icon="x" color="error" />
<Badge icon="info" color="info" />

// Sizes
<Badge icon="heart" scale="md" />
<Badge icon="heart" scale="lg" />

// With scrim overlay
<Badge icon="bell" color="primary" scrim />

// Custom icon stroke width
<Badge icon="settings" iconStrokeWidth={1.5} />
```

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

### Use Card Component

Source: https://context7.com/chainlift/liftkit/llms.txt

Examples of the Card component demonstrating different materials, variants, scaling factors, and optical correction settings.

```tsx
import Card from "@/registry/nextjs/components/card";

<Card>
  <h2>Card Title</h2>
  <p>Card content goes here.</p>
</Card>
<Card variant="fill" bgColor="surface">Filled Card</Card>
<Card material="glass" materialProps={{ scrimThickness: "default" }}>Glassmorphism Card</Card>
<Card scaleFactor="title1">
  <h1 className="title1-bold">Large Title</h1>
</Card>
<Card isClickable isScrollable bgColor="surfacecontainer">
  <p>Long scrollable content...</p>
</Card>
```

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

### Icon Component Examples (React/TypeScript)

Source: https://context7.com/chainlift/liftkit/llms.txt

Showcases the Icon component for rendering Lucide icons with automatic sizing based on font classes and theme-aware colors. Supports optical shift and custom stroke widths.

```tsx
import Icon from "@/registry/nextjs/components/icon";

// Basic icon
<Icon name="home" />

// Colored icons (uses LkColor tokens)
<Icon name="star" color="primary" />
<Icon name="heart" color="error" />
<Icon name="check" color="success" />

// Font class sizing
<Icon name="settings" fontClass="display1" />
<Icon name="menu" fontClass="heading" />
<Icon name="info" fontClass="caption" />

// Optical shift (pulls icon up slightly for alignment)
<Icon name="arrow-up" opticShift />

// Custom stroke width
<Icon name="search" strokeWidth={1.5} />
```

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

### Import LiftKit CSS

Source: https://github.com/chainlift/liftkit/blob/main/README.md

Demonstrates how to import LiftKit's core CSS styles into your Next.js application's global CSS file to apply the framework's styling.

```css
@import url("@/lib/css/index.css");
```

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

### Implement Responsive NavBar Component

Source: https://context7.com/chainlift/liftkit/llms.txt

Demonstrates how to use the NavBar component with customizable materials, navigation buttons, icon buttons, and call-to-action buttons. It supports both flat and glass material styles.

```tsx
import NavBar from "@/registry/nextjs/components/navbar";
import Button from "@/registry/nextjs/components/button";
import IconButton from "@/registry/nextjs/components/icon-button";

<NavBar
  material="flat"
  navButtons={
    <>
      <Button label="Products" variant="text" />
      <Button label="Pricing" variant="text" />
      <Button label="About" variant="text" />
    </>
  }
  iconButtons={
    <>
      <IconButton icon="search" />
      <IconButton icon="bell" />
    </>
  }
  ctaButtons={
    <>
      <Button label="Sign In" variant="outline" />
      <Button label="Get Started" />
    </>
  }
/>

<NavBar material="glass" navButtons={...} />
```

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

### Implement ThemeProvider for Dynamic Theming

Source: https://context7.com/chainlift/liftkit/llms.txt

Wrap your application with the ThemeProvider to enable Material Design 3 dynamic theming. This includes light/dark mode support and hooks to manipulate the color palette.

```tsx
import ThemeProvider, { useTheme } from "@/registry/nextjs/components/theme";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <ThemeProvider>
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}

function ThemeControls() {
  const { theme, palette, setPalette, colorMode, setColorMode, updateTheme, updateThemeFromMaster } = useTheme();
  const handleColorChange = async (hexCode: string) => {
    await updateThemeFromMaster(hexCode, setPalette);
  };
  return (
    <button onClick={() => setColorMode(colorMode === "light" ? "dark" : "light")}>
      Toggle {colorMode === "light" ? "Dark" : "Light"} Mode
    </button>
  );
}
```

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

### Grid Component

Source: https://context7.com/chainlift/liftkit/llms.txt

A responsive CSS grid layout component with configurable columns and gaps.

```APIDOC
## Grid Component

### Description
A responsive CSS grid component with configurable columns and gap spacing.

### Usage
```tsx
import Grid from "@/registry/nextjs/components/grid";
<Grid columns={3} gap="lg">
  <div>Item 1</div>
</Grid>
```
```

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

### ThemeProvider API

Source: https://context7.com/chainlift/liftkit/llms.txt

The ThemeProvider component manages dynamic Material Design 3 theming, providing context for color modes and palette generation.

```APIDOC
## ThemeProvider Context API

### Description
The ThemeProvider wraps the application to manage light/dark modes and dynamic color palettes based on Material Design 3 specifications.

### Parameters
#### Hook: useTheme()
- **theme** (object) - Current theme colors (light/dark).
- **palette** (object) - Current source palette colors.
- **setPalette** (function) - Updates the current palette.
- **colorMode** (string) - Current mode: "light" | "dark".
- **setColorMode** (function) - Toggles between light and dark modes.
- **updateTheme** (function) - Regenerates theme from current palette.
- **updateThemeFromMaster** (function) - Generates a full palette from a single hex code.

### Response Example
{
  "colorMode": "light",
  "theme": { "primary": "#6750A4", "surface": "#FEF7FF" }
}
```

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

### Icon Component

Source: https://context7.com/chainlift/liftkit/llms.txt

Renders Lucide icons with theme-aware colors and font-based sizing.

```APIDOC
## Icon Component

### Description
Renders Lucide icons with automatic sizing based on font class and theme-aware colors.

### Usage
```tsx
import Icon from "@/registry/nextjs/components/icon";
<Icon name="home" color="primary" fontClass="display1" />
```
```

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

### Text and Heading Components

Source: https://context7.com/chainlift/liftkit/llms.txt

Typography components supporting LiftKit font classes and color tokens.

```APIDOC
## Text and Heading Components

### Description
Typography components with LiftKit font classes and color tokens.

### Usage
```tsx
import Heading from "@/registry/nextjs/components/heading";
<Heading tag="h1" fontClass="display1-bold">Main Title</Heading>
```
```

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

### Row and Column Layout Components (React/TypeScript)

Source: https://context7.com/chainlift/liftkit/llms.txt

Demonstrates the Row and Column components for flexible horizontal and vertical layouts using Flexbox. Includes options for alignment, gap control, and wrapping children.

```tsx
import Row from "@/registry/nextjs/components/row";
import Column from "@/registry/nextjs/components/column";

// Basic row layout
<Row gap="md">
  <Button label="Save" />
  <Button label="Cancel" variant="outline" />
</Row>

// Row with alignment
<Row alignItems="center" justifyContent="space-between" gap="lg">
  <h2>Title</h2>
  <Button label="Action" />
</Row>

// Row with wrapping children
<Row gap="sm" wrapChildren>
  {tags.map(tag => <Badge key={tag} icon="tag" />)}
</Row>

// Column layout
<Column gap="md" alignItems="stretch">
  <TextInput name="Email" />
  <TextInput name="Password" />
  <Button label="Sign In" />
</Column>

// Nested layouts
<Row gap="xl" alignItems="start">
  <Column gap="sm" style={{ flex: 1 }}>
    <h3>Section 1</h3>
    <p>Content here</p>
  </Column>
  <Column gap="sm" style={{ flex: 1 }}>
    <h3>Section 2</h3>
    <p>More content</p>
  </Column>
</Row>
```

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

### Row and Column Components

Source: https://context7.com/chainlift/liftkit/llms.txt

Flexbox layout components for horizontal and vertical arrangements.

```APIDOC
## Row and Column Components

### Description
Flexbox layout components for horizontal (Row) and vertical (Column) arrangements with alignment and gap controls.

### Usage
```tsx
import Row from "@/registry/nextjs/components/row";
<Row gap="md" alignItems="center">
  <Button label="Save" />
</Row>
```
```

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

### Implement Dropdown Component

Source: https://context7.com/chainlift/liftkit/llms.txt

A generic menu component used for navigation or action lists. It supports custom triggers like buttons or icon buttons and contains multiple menu items.

```tsx
import { Dropdown, DropdownTrigger, DropdownMenu } from "@/registry/nextjs/components/dropdown";
import MenuItem from "@/registry/nextjs/components/menu-item";

<Dropdown>
  <DropdownTrigger>
    <Button label="Menu" endIcon="chevron-down" />
  </DropdownTrigger>
  <DropdownMenu cardProps={{ scaleFactor: "body", bgColor: "surfacecontainer" }}>
    <MenuItem startIcon="user">Profile</MenuItem>
    <MenuItem startIcon="settings">Settings</MenuItem>
    <MenuItem startIcon="log-out">Logout</MenuItem>
  </DropdownMenu>
</Dropdown>
```

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

### Card Component API

Source: https://context7.com/chainlift/liftkit/llms.txt

The Card component provides a flexible container with support for glassmorphism, variants, and optical scaling.

```APIDOC
## Card Component

### Description
A container component that supports various materials and automatic scaling based on typography.

### Props
- **variant** (string) - Optional - "fill" | "outline" | "transparent".
- **material** (string) - Optional - "flat" | "glass".
- **materialProps** (object) - Optional - Configuration for material effects (e.g., scrimThickness).
- **scaleFactor** (string) - Optional - Scales content based on typography tokens.
- **opticalCorrection** (string) - Optional - "x" | "y" | "none".
- **isClickable** (boolean) - Optional - Adds hover/click interaction styles.
- **isScrollable** (boolean) - Optional - Enables internal scrolling.

### Usage Example
<Card variant="outline" material="glass" isClickable>Content</Card>
```

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

### Select Component

Source: https://context7.com/chainlift/liftkit/llms.txt

A custom select dropdown component that offers accessible keyboard navigation and seamless integration with forms. It supports custom options and can be configured with various triggers.

```APIDOC
## Select Component

A custom select dropdown with accessible keyboard navigation and form compatibility.

### Description
This component provides a customizable select dropdown functionality.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```tsx
import { Select, SelectTrigger, SelectMenu, SelectOption } from "@/registry/nextjs/components/select";
import Button from "@/registry/nextjs/components/button";

const [selectedValue, setSelectedValue] = useState("");

const options = [
  { label: "Option 1", value: "opt1" },
  { label: "Option 2", value: "opt2" },
  { label: "Option 3", value: "opt3" },
];

<Select
  options={options}
  value={selectedValue}
  onChange={(e) => setSelectedValue(e.target.value)}
  name="mySelect"
>
  <SelectTrigger>
    <Button
      label={selectedValue || "Select an option"}
      variant="outline"
      endIcon="chevron-down"
    />
  </SelectTrigger>
  <SelectMenu cardProps={{ scaleFactor: "body" }}>
    {options.map((option) => (
      <SelectOption key={option.value} value={option.value}>
        {option.label}
      </SelectOption>
    ))}
  </SelectMenu>
</Select>

// With icons on options
<SelectOption value="settings" startIcon={{ name: "settings" }}>
  Settings
</SelectOption>
```

### Response
N/A (Component Usage)

#### Success Response (200)
N/A

#### Response Example
N/A
```

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

### Badge Component

Source: https://context7.com/chainlift/liftkit/llms.txt

The Badge component displays an icon with customizable colors and scales, featuring automatic contrast calculation.

```APIDOC
## Badge Component

### Description
A badge component displaying an icon with customizable color and scale. Automatically calculates contrasting text/icon colors.

### Usage
```tsx
import Badge from "@/registry/nextjs/components/badge";
<Badge icon="star" color="success" scale="md" />
```
```

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

### TextInput Component

Source: https://context7.com/chainlift/liftkit/llms.txt

A text input field with support for labels, help text, and icons.

```APIDOC
## TextInput Component

### Description
A text input field with label positioning options, help text, and icon support.

### Usage
```tsx
import TextInput from "@/registry/nextjs/components/text-input";
<TextInput name="Email" labelPosition="on-input" placeholder="name@example.com" />
```
```

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

### Tabs Component

Source: https://context7.com/chainlift/liftkit/llms.txt

A component for creating tabbed interfaces that automatically handle content switching. It supports basic usage, state callbacks, and scrollable content areas.

```APIDOC
## Tabs Component

A tabbed interface with automatic content switching.

### Description
This component allows for the creation of tabbed navigation and content display.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```tsx
import Tabs from "@/registry/nextjs/components/tabs";

// Basic tabs
<Tabs tabLinks={["Overview", "Details", "Settings"]}>
  <div>Overview content here</div>
  <div>Details content here</div>
  <div>Settings content here</div>
</Tabs>

// With state callback
const [activeTab, setActiveTab] = useState(0);

<Tabs
  tabLinks={["Tab 1", "Tab 2", "Tab 3"]}
  onActiveTabChange={(index) => setActiveTab(index)} 
>
  <Card>Content for Tab 1</Card>
  <Card>Content for Tab 2</Card>
  <Card>Content for Tab 3</Card>
</Tabs>

// Scrollable content
<Tabs tabLinks={["Feed", "Messages"]} scrollableContent>
  <div style={{ height: "400px" }}>Long scrollable feed...</div>
  <div style={{ height: "400px" }}>Message list...</div>
</Tabs>
```

### Response
N/A (Component Usage)

#### Success Response (200)
N/A

#### Response Example
N/A
```

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

### Implement Snackbar Component

Source: https://context7.com/chainlift/liftkit/llms.txt

A notification component for displaying transient messages. Supports global color theming, icons, action buttons, and dismiss functionality.

```tsx
import Snackbar from "@/registry/nextjs/components/snackbar";
import Text from "@/registry/nextjs/components/text";

<Snackbar globalColor="success">
  <Icon name="check-circle" />
  <Text>Operation completed successfully!</Text>
</Snackbar>
```

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

### Text and Heading Typography Components (React/TypeScript)

Source: https://context7.com/chainlift/liftkit/llms.txt

Showcases the Text and Heading components for semantic typography using LiftKit font classes and color tokens. Supports various heading levels, text styles, and semantic tags.

```tsx
import Text from "@/registry/nextjs/components/text";
import Heading from "@/registry/nextjs/components/heading";

// Headings with semantic tags
<Heading tag="h1" fontClass="display1-bold">Main Title</Heading>
<Heading tag="h2" fontClass="title1-bold">Section Title</Heading>
<Heading tag="h3" fontClass="heading-bold" fontColor="primary">Subsection</Heading>

// Text component
<Text fontClass="body">Regular body text</Text>
<Text fontClass="body-bold" color="primary">Bold primary text</Text>
<Text fontClass="caption" color="outline">Muted caption</Text>

// Text with semantic tags
<Text tag="p" fontClass="callout">Paragraph text</Text>
<Text tag="span" fontClass="label">Inline label</Text>
<Text tag="code" fontClass="body-mono">const code = "example";</Text>

// Available font classes:
// display1, display2, title1, title2, title3, heading, subheading,
// body, callout, label, caption, capline
// Add -bold or -mono suffix for variants: body-bold, heading-mono
```

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

### Implement Tabs Component

Source: https://context7.com/chainlift/liftkit/llms.txt

A tabbed interface component for organizing content. Supports automatic content switching, state callbacks for active tabs, and scrollable content areas.

```tsx
import Tabs from "@/registry/nextjs/components/tabs";

<Tabs tabLinks={["Overview", "Details", "Settings"]}>
  <div>Overview content here</div>
  <div>Details content here</div>
  <div>Settings content here</div>
</Tabs>
```

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

### Button Component API

Source: https://context7.com/chainlift/liftkit/llms.txt

The Button component supports multiple variants, sizes, and semantic color states with built-in icon support.

```APIDOC
## Button Component

### Description
A highly customizable button component supporting variants, semantic colors, and Lucide icon integration.

### Props
- **label** (string) - Required - The button text.
- **variant** (string) - Optional - "fill" | "outline" | "text".
- **size** (string) - Optional - "sm" | "md" | "lg".
- **color** (string) - Optional - "primary" | "secondary" | "tertiary" | "success" | "warning" | "error" | "info".
- **startIcon** (string) - Optional - Lucide icon name.
- **endIcon** (string) - Optional - Lucide icon name.
- **stateLayerOverride** (object) - Optional - Custom style overrides for hover/focus states.

### Usage Example
<Button label="Submit" variant="fill" color="primary" startIcon="send" />
```

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

### Implement Switch Component

Source: https://context7.com/chainlift/liftkit/llms.txt

A toggle switch component for boolean state management. Features include controlled state, custom color themes, and label integration.

```tsx
import Switch from "@/registry/nextjs/components/switch";

const [isEnabled, setIsEnabled] = useState(false);
<Switch value={isEnabled} onClick={(newState) => setIsEnabled(newState)} />

<Switch offColor="surfacevariant" onColor="success" />
```

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

### Implement Select Component

Source: https://context7.com/chainlift/liftkit/llms.txt

A custom accessible dropdown component for form inputs. It supports controlled state, custom trigger buttons, and icon-enhanced options.

```tsx
import { Select, SelectTrigger, SelectMenu, SelectOption } from "@/registry/nextjs/components/select";
import Button from "@/registry/nextjs/components/button";

const [selectedValue, setSelectedValue] = useState("");
const options = [{ label: "Option 1", value: "opt1" }, { label: "Option 2", value: "opt2" }, { label: "Option 3", value: "opt3" }];

<Select options={options} value={selectedValue} onChange={(e) => setSelectedValue(e.target.value)} name="mySelect">
  <SelectTrigger>
    <Button label={selectedValue || "Select an option"} variant="outline" endIcon="chevron-down" />
  </SelectTrigger>
  <SelectMenu cardProps={{ scaleFactor: "body" }}>
    {options.map((option) => (
      <SelectOption key={option.value} value={option.value}>{option.label}</SelectOption>
    ))}
  </SelectMenu>
</Select>
```

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

### Switch Component

Source: https://context7.com/chainlift/liftkit/llms.txt

A toggle switch component that allows for customization of on/off colors and can be controlled programmatically or used with a label.

```APIDOC
## Switch Component

A toggle switch with customizable on/off colors.

### Description
This component provides a toggle switch for binary state selection.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```tsx
import Switch from "@/registry/nextjs/components/switch";

// Basic switch
<Switch />

// Controlled switch
const [isEnabled, setIsEnabled] = useState(false);
<Switch value={isEnabled} onClick={(newState) => setIsEnabled(newState)} />

// Custom colors
<Switch
  offColor="surfacevariant"
  onColor="success"
/>

// With label
<Row alignItems="center" gap="sm">
  <Text fontClass="body">Dark Mode</Text>
  <Switch
    value={isDarkMode}
    onClick={(enabled) => setIsDarkMode(enabled)}
  />
</Row>
```

### Response
N/A (Component Usage)

#### Success Response (200)
N/A

#### Response Example
N/A
```

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

### Dropdown Component

Source: https://context7.com/chainlift/liftkit/llms.txt

A versatile dropdown menu component designed for navigation and action menus. It can be triggered by buttons or icon buttons and contains menu items.

```APIDOC
## Dropdown Component

A generic dropdown menu component for navigation and action menus.

### Description
This component provides a dropdown menu for displaying navigation or action items.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```tsx
import { Dropdown, DropdownTrigger, DropdownMenu } from "@/registry/nextjs/components/dropdown";
import Button from "@/registry/nextjs/components/button";
import MenuItem from "@/registry/nextjs/components/menu-item";

<Dropdown>
  <DropdownTrigger>
    <Button label="Menu" endIcon="chevron-down" />
  </DropdownTrigger>
  <DropdownMenu cardProps={{ scaleFactor: "body", bgColor: "surfacecontainer" }}>
    <MenuItem startIcon="user">Profile</MenuItem>
    <MenuItem startIcon="settings">Settings</MenuItem>
    <MenuItem startIcon="log-out">Logout</MenuItem>
  </DropdownMenu>
</Dropdown>

// Icon button trigger
<Dropdown>
  <DropdownTrigger>
    <IconButton icon="more-vertical" />
  </DropdownTrigger>
  <DropdownMenu>
    <MenuItem>Edit</MenuItem>
    <MenuItem>Delete</MenuItem>
  </DropdownMenu>
</Dropdown>
```

### Response
N/A (Component Usage)

#### Success Response (200)
N/A

#### Response Example
N/A
```

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

### Snackbar Component

Source: https://context7.com/chainlift/liftkit/llms.txt

A notification component that displays temporary messages to the user. It supports icons, text, action buttons, and automatic color theming based on severity.

```APIDOC
## Snackbar Component

A notification component supporting icons, text, and action buttons with automatic color theming.

### Description
This component displays temporary, non-intrusive messages or notifications to the user.

### Method
N/A (Component Usage)

### Endpoint
N/A (Component Usage)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```tsx
import Snackbar from "@/registry/nextjs/components/snackbar";
import Text from "@/registry/nextjs/components/text";
import Button from "@/registry/nextjs/components/button";
import Icon from "@/registry/nextjs/components/icon";
import IconButton from "@/registry/nextjs/components/icon-button";

// Basic snackbar
<Snackbar>
  <Text>Your changes have been saved.</Text>
</Snackbar>

// With global color (auto-colors children)
<Snackbar globalColor="success">
  <Icon name="check-circle" />
  <Text>Operation completed successfully!</Text>
</Snackbar>

// With action button
<Snackbar globalColor="warning">
  <Icon name="alert-triangle" />
  <Text>Connection lost.</Text>
  <Button label="Retry" />
</Snackbar>

// With dismiss button
<Snackbar globalColor="error">
  <Icon name="x-circle" />
  <Text>An error occurred.</Text>
  <Button label="Details" />
  <IconButton icon="x" onClick={() => setShowSnackbar(false)} />
</Snackbar>
```

### Response
N/A (Component Usage)

#### Success Response (200)
N/A

#### Response Example
N/A
```

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

### Define LiftKit TypeScript Types

Source: https://context7.com/chainlift/liftkit/llms.txt

Defines core TypeScript types for consistent styling, including size units, color tokens, font classes, and container widths. These types ensure design system compliance across the application.

```typescript
type LkSizeUnit = "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl";
type LkColor = "primary" | "onprimary" | "primarycontainer" | "secondary" | "surface" | "onsurface" | "error" | "success" | "warning" | "info";
type LkColorWithOnToken = "primary" | "secondary" | "tertiary" | "error" | "surface" | "surfacecontainer" | "success" | "warning" | "info";
type LkFontClass = "display1" | "display2" | "title1" | "title2" | "title3" | "heading" | "subheading" | "body" | "callout" | "label" | "caption" | "capline" | "body-bold" | "heading-mono";
type LkContainerWidth = "xs" | "sm" | "md" | "lg" | "xl" | "none" | "auto";
```

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