### Badge Component Examples (React/TypeScript)

Source: https://context7.com/tremorlabs/tremor/llms.txt

Shows how to use the Tremor Raw Badge component for displaying labels and status information. Examples include different color variants, badges with custom content including icons, and using the `badgeVariants` helper for styling custom elements.

```tsx
import { Badge } from "./components/Badge/Badge"

// Status badges
<Badge variant="default">Active</Badge>
<Badge variant="success">Completed</Badge>
<Badge variant="error">Failed</Badge>
<Badge variant="warning">Pending</Badge>
<Badge variant="neutral">Inactive</Badge>

// Badge with custom content
<Badge variant="success">
  <span className="flex items-center gap-1">
    ✓ Verified
  </span>
</Badge>

// Using badgeVariants for custom elements
import { badgeVariants } from "./components/Badge/Badge"
<span className={badgeVariants({ variant: "warning" })}>
  Custom styled badge
</span>
```

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

### Select Component Examples (React/TypeScript)

Source: https://context7.com/tremorlabs/tremor/llms.txt

Demonstrates the Select component for creating dropdown menus. Features keyboard navigation, search, grouping, and supports controlled states and error handling. Built on Radix UI.

```tsx
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
  SelectGroup,
  SelectGroupLabel,
} from "./components/Select/Select"

// Basic select
<Select>
  <SelectTrigger>
    <SelectValue placeholder="Select an option" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="option1">Option 1</SelectItem>
    <SelectItem value="option2">Option 2</SelectItem>
    <SelectItem value="option3">Option 3</SelectItem>
  </SelectContent>
</Select>

// Controlled select with error state
const [value, setValue] = useState("")
<Select value={value} onValueChange={setValue}>
  <SelectTrigger hasError={!value}>
    <SelectValue placeholder="Choose category" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="electronics">Electronics</SelectItem>
    <SelectItem value="clothing">Clothing</SelectItem>
    <SelectItem value="food">Food</SelectItem>
  </SelectContent>
</Select>

// Grouped select
<Select>
  <SelectTrigger>
    <SelectValue placeholder="Select country" />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectGroupLabel>North America</SelectGroupLabel>
      <SelectItem value="us">United States</SelectItem>
      <SelectItem value="ca">Canada</SelectItem>
    </SelectGroup>
    <SelectGroup>
      <SelectGroupLabel>Europe</SelectGroupLabel>
      <SelectItem value="uk">United Kingdom</SelectItem>
      <SelectItem value="de">Germany</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>

// Disabled select
<Select disabled>
  <SelectTrigger>
    <SelectValue placeholder="Disabled select" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="item">Item</SelectItem>
  </SelectContent>
</Select>
```

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

### Card Component Examples (React/TypeScript)

Source: https://context7.com/tremorlabs/tremor/llms.txt

Illustrates the usage of the Tremor Raw Card component for grouping related content. Examples cover basic card usage, applying custom styling via the `className` prop, and polymorphic rendering using the `asChild` prop with semantic HTML elements.

```tsx
import { Card } from "./components/Card/Card"

// Basic card
<Card>
  <h3 className="text-lg font-semibold">Revenue</h3>
  <p className="text-gray-500">$12,345</p>
</Card>

// Card with custom styling
<Card className="hover:shadow-lg transition-shadow">
  <div className="space-y-2">
    <h3>Dashboard Metrics</h3>
    <p>View your key performance indicators</p>
  </div>
</Card>

// Card as child component (polymorphic)
<Card asChild>
  <article>
    <header>Custom Semantic Card</header>
    <p>Using semantic HTML with Card styling</p>
  </article>
</Card>
```

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

### BarChart Component Examples (React/TypeScript)

Source: https://context7.com/tremorlabs/tremor/llms.txt

Demonstrates the BarChart component for creating interactive charts. Supports stacked, percentage, and vertical layouts, custom tooltips, value formatting, and event handling. Built on Recharts.

```tsx
import { BarChart } from "./components/BarChart/BarChart"

const salesData = [
  { month: "Jan 23", revenue: 2890, expenses: 2338 },
  { month: "Feb 23", revenue: 2756, expenses: 2103 },
  { month: "Mar 23", revenue: 3322, expenses: 2194 },
  { month: "Apr 23", revenue: 3470, expenses: 2108 },
]

// Basic bar chart
<BarChart
  data={salesData}
  index="month"
  categories={["revenue", "expenses"]}
/>

// Advanced configuration with formatting and labels
<BarChart
  data={salesData}
  index="month"
  categories={["revenue", "expenses"]}
  colors={["blue", "red"]}
  valueFormatter={(value) => `$${value.toLocaleString()}`}
  xAxisLabel="Month of Year"
  yAxisLabel="Amount (USD)"
  showLegend={true}
  showGridLines={true}
  legendPosition="center"
/>

// Stacked bar chart with interactions
<BarChart
  data={salesData}
  index="month"
  categories={["revenue", "expenses"]}
  type="stacked"
  onValueChange={(value) => {
    console.log("Clicked bar:", value)
  }}
  enableLegendSlider={true}
/>

// Percentage stacked chart
<BarChart
  data={salesData}
  index="month"
  categories={["revenue", "expenses"]}
  type="percent"
  allowDecimals={false}
/>

// Custom tooltip
<BarChart
  data={salesData}
  index="month"
  categories={["revenue"]}
  customTooltip={({ active, payload, label }) => {
    if (!active || !payload) return null
    return (
      <div className="rounded-md border bg-white p-2 shadow-lg">
        <p className="font-semibold">{label}</p>
        <p className="text-gray-600">${payload[0].value}</p>
      </div>
    )
  }}
/>

// Vertical layout
<BarChart
  data={salesData}
  index="month"
  categories={["revenue"]}
  layout="vertical"
/>
```

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

### Button Component Examples (React/TypeScript)

Source: https://context7.com/tremorlabs/tremor/llms.txt

Demonstrates the usage of the Tremor Raw Button component, including basic variants, loading states, disabled states, and polymorphic rendering using the `asChild` prop. It also shows how to use the `buttonVariants` helper for custom elements.

```tsx
import { Button } from "./components/Button/Button"

// Basic usage with variants
<Button variant="primary">Primary Button</Button>
<Button variant="secondary">Secondary Button</Button>
<Button variant="destructive">Delete Account</Button>
<Button variant="ghost">Cancel</Button>
<Button variant="light">Light Button</Button>

// Loading state with custom text
<Button isLoading loadingText="Saving...">
  Save Changes
</Button>

// Disabled state
<Button disabled>Disabled Button</Button>

// Polymorphic rendering as anchor tag
<Button asChild>
  <a href="/documentation">Go to Docs</a>
</Button>

// Using buttonVariants helper for custom elements
import { buttonVariants } from "./components/Button/Button"
<a className={buttonVariants({ variant: "secondary" })} href="/api">
  API Reference
</a>
```

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

### Input Component Examples (React/TypeScript)

Source: https://context7.com/tremorlabs/tremor/llms.txt

Showcases the Input component for various form field types. Supports text, email, password with visibility toggle, search, number inputs, disabled states, and custom styling.

```tsx
import { Input } from "./components/Input/Input"

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

// Email input with error state
<Input
  type="email"
  placeholder="you@example.com"
  hasError={true}
  aria-invalid="true"
/>

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

// Search input with icon
<Input
  type="search"
  placeholder="Search..."
/>

// Number input without stepper controls
<Input
  type="number"
  enableStepper={false}
  placeholder="Enter amount"
/>

// Disabled input
<Input
  value="Read only value"
  disabled
/>

// Custom styled input
<Input
  className="max-w-md"
  inputClassName="text-lg"
  placeholder="Custom styling"
/>
```

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

### Basic and Advanced Table Component in React

Source: https://context7.com/tremorlabs/tremor/llms.txt

Demonstrates the usage of a semantic and accessible Table component for displaying tabular data. Includes examples for basic tables, tables with captions, and responsive tables with custom styling. This component is built with React and TypeScript.

```tsx
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeaderCell,
  TableRoot,
  TableRow,
  TableCaption,
} from "./components/Table/Table"

// Basic table
<TableRoot>
  <Table>
    <TableHead>
      <TableRow>
        <TableHeaderCell>Name</TableHeaderCell>
        <TableHeaderCell>Email</TableHeaderCell>
        <TableHeaderCell>Status</TableHeaderCell>
      </TableRow>
    </TableHead>
    <TableBody>
      <TableRow>
        <TableCell>John Doe</TableCell>
        <TableCell>john@example.com</TableCell>
        <TableCell>Active</TableCell>
      </TableRow>
      <TableRow>
        <TableCell>Jane Smith</TableCell>
        <TableCell>jane@example.com</TableCell>
        <TableCell>Pending</TableCell>
      </TableRow>
    </TableBody>
  </Table>
</TableRoot>

// Table with caption and footer
<TableRoot>
  <Table>
    <TableCaption>Q4 2023 Sales Report</TableCaption>
    <TableHead>
      <TableRow>
        <TableHeaderCell>Product</TableHeaderCell>
        <TableHeaderCell>Revenue</TableHeaderCell>
      </TableRow>
    </TableHead>
    <TableBody>
      <TableRow>
        <TableCell>Product A</TableCell>
        <TableCell>$12,345</TableCell>
      </TableRow>
      <TableRow>
        <TableCell>Product B</TableCell>
        <TableCell>$8,900</TableCell>
      </TableRow>
    </TableBody>
  </Table>
</TableRoot>

// Responsive table with custom styling
<TableRoot className="max-w-4xl">
  <Table>
    <TableHead>
      <TableRow>
        <TableHeaderCell>Column 1</TableHeaderCell>
        <TableHeaderCell>Column 2</TableHeaderCell>
      </TableRow>
    </TableHead>
    <TableBody>
      <TableRow className="hover:bg-gray-50">
        <TableCell className="font-medium">Data 1</TableCell>
        <TableCell>Data 2</TableCell>
      </TableRow>
    </TableBody>
  </Table>
</TableRoot>
```

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

### Accessible Dialog Component in React with Radix UI

Source: https://context7.com/tremorlabs/tremor/llms.txt

Implements a modal dialog component using Radix UI, featuring overlay, accessibility, and flexible content layout. Examples cover basic dialogs, controlled dialogs with forms, and dialogs for destructive actions. Requires Button and Input components for interaction.

```tsx
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
  DialogClose,
} from "./components/Dialog/Dialog"
import { Button } from "./components/Button/Button"

// Basic dialog
<Dialog>
  <DialogTrigger asChild>
    <Button>Open Dialog</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Confirm Action</DialogTitle>
      <DialogDescription>
        Are you sure you want to proceed with this action?
      </DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <DialogClose asChild>
        <Button variant="secondary">Cancel</Button>
      </DialogClose>
      <Button variant="primary">Confirm</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

// Controlled dialog with form
const [open, setOpen] = useState(false)
<Dialog open={open} onOpenChange={setOpen}>
  <DialogTrigger asChild>
    <Button>Create User</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>New User</DialogTitle>
      <DialogDescription>
        Enter user details below
      </DialogDescription>
    </DialogHeader>
    <form onSubmit={(e) => {
      e.preventDefault()
      setOpen(false)
    }}>
      <div className="space-y-4 py-4">
        <Input placeholder="Name" />
        <Input type="email" placeholder="Email" />
      </div>
      <DialogFooter>
        <Button type="submit">Create</Button>
      </DialogFooter>
    </form>
  </DialogContent>
</Dialog>

// Dialog with destructive action
<Dialog>
  <DialogTrigger asChild>
    <Button variant="destructive">Delete Account</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Delete Account</DialogTitle>
      <DialogDescription>
        This action cannot be undone. All your data will be permanently removed.
      </DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <DialogClose asChild>
        <Button variant="ghost">Cancel</Button>
      </DialogClose>
      <Button variant="destructive">Delete Forever</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>
```

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

### Utility Function for Smart Class Merging in React

Source: https://context7.com/tremorlabs/tremor/llms.txt

Provides a utility function 'cx' for intelligently merging Tailwind CSS classes, handling conflicts and conditional application. This function is useful for dynamic styling in React components. It takes multiple class strings or objects as arguments.

```tsx
import { cx } from "./utils/cx"

// Merge Tailwind classes intelligently
const buttonClasses = cx(
  "px-4 py-2 rounded-md",
  "bg-blue-500 hover:bg-blue-600",
  isActive && "bg-blue-700",
  className
)

// Handles conflicting Tailwind classes correctly
cx("px-4 px-2") // Result: "px-2" (later value wins)
cx("bg-red-500", "bg-blue-500") // Result: "bg-blue-500"

// Conditional class application
cx(
  "base-class",
  condition && "conditional-class",
  {
    "active": isActive,
    "disabled": isDisabled,
  }
)
```

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