unkeyed · MichaelUnkey · Jul 8, 2025 · Jun 27, 2025 · Jul 2, 2025 · Jul 2, 2025
@@ -1,6 +1,6 @@
-import { LogsLLMSearch } from "@/components/logs/llm-search";
 import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
+import { LLMSearch } from "@unkey/ui";
 import { transformStructuredOutputToFilters } from "@unkey/ui";
 import { useFilters } from "../../../../hooks/use-filters";
 
@@ -41,7 +41,7 @@ export const LogsSearch = ({ apiId }: { apiId: string }) => {
   });
 
   return (
-    <LogsLLMSearch
+    <LLMSearch
       exampleQueries={[
         "Show rate limited outcomes",
         "Show identity that starts with test_",

@@ -1,6 +1,6 @@
-import { LogsLLMSearch } from "@/components/logs/llm-search";
 import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
+import { LLMSearch } from "@unkey/ui";
 import { transformStructuredOutputToFilters } from "@unkey/ui";
 import type { KeyDetailsFilterValue } from "../../../../filters.schema";
 import { useFilters } from "../../../../hooks/use-filters";
@@ -50,7 +50,7 @@ export const LogsSearch = ({ apiId }: { apiId: string }) => {
   });
 
   return (
-    <LogsLLMSearch
+    <LLMSearch
       exampleQueries={["Show rate limited outcomes"]}
       isLoading={queryLLMForStructuredOutput.isLoading}
       searchMode="manual"

@@ -1,6 +1,6 @@
-import { LogsLLMSearch } from "@/components/logs/llm-search";
 import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
+import { LLMSearch } from "@unkey/ui";
 import { transformStructuredOutputToFilters } from "@unkey/ui";
 import { useFilters } from "../../../../hooks/use-filters";
 
@@ -41,7 +41,7 @@ export const LogsSearch = ({ keyspaceId }: { keyspaceId: string }) => {
   });
 
   return (
-    <LogsLLMSearch
+    <LLMSearch
       exampleQueries={[
         "Find key exactly key_abc123xyz",
         "Show keys with ID containing 'test'",

@@ -1,7 +1,7 @@
-import { LogsLLMSearch } from "@/components/logs/llm-search";
 import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
 import type { ApiOverview } from "@/lib/trpc/routers/api/overview/query-overview/schemas";
+import { LLMSearch } from "@unkey/ui";
 import { useRef } from "react";
 type Props = {
   apiList: ApiOverview[];
@@ -44,7 +44,7 @@ export const LogsSearch = ({ onSearch, onApiListChange, apiList }: Props) => {
   };
 
   return (
-    <LogsLLMSearch
+    <LLMSearch
       exampleQueries={[
         "Show rate limited requests today",
         "Show requests that were not rate limited today",

@@ -1,6 +1,6 @@
-import { LogsLLMSearch } from "@/components/logs/llm-search";
 import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
+import { LLMSearch } from "@unkey/ui";
 import { transformStructuredOutputToFilters } from "@unkey/ui";
 import { useFilters } from "../../../../hooks/use-filters";
 
@@ -41,7 +41,7 @@ export const LogsSearch = () => {
   });
 
   return (
-    <LogsLLMSearch
+    <LLMSearch
       exampleQueries={[
         "Show keys created in the last 3h",
         "Show all ratelimit events",

@@ -1,6 +1,6 @@
-import { LogsLLMSearch } from "@/components/logs/llm-search";
 import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
+import { LLMSearch } from "@unkey/ui";
 import { transformStructuredOutputToFilters } from "@unkey/ui";
 import { useFilters } from "../../../../hooks/use-filters";
 
@@ -41,7 +41,7 @@ export const PermissionSearch = () => {
   });
 
   return (
-    <LogsLLMSearch
+    <LLMSearch
       exampleQueries={[
         "find admin permissions",
         "show api.read and api.write permissions",

@@ -1,6 +1,6 @@
-import { LogsLLMSearch } from "@/components/logs/llm-search";
 import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
+import { LLMSearch } from "@unkey/ui";
 import { transformStructuredOutputToFilters } from "@unkey/ui";
 import { useFilters } from "../../../../hooks/use-filters";
 
@@ -41,7 +41,7 @@ export const RolesSearch = () => {
   });
 
   return (
-    <LogsLLMSearch
+    <LLMSearch
       exampleQueries={[
         "Find admin and moderator roles",
         "Show roles with api.read permissions",

@@ -1,7 +1,7 @@
 import { useFilters } from "@/app/(app)/logs/hooks/use-filters";
-import { LogsLLMSearch } from "@/components/logs/llm-search";
 import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
+import { LLMSearch } from "@unkey/ui";
 import { transformStructuredOutputToFilters } from "@unkey/ui";
 
 export const LogsSearch = () => {
@@ -41,7 +41,7 @@ export const LogsSearch = () => {
   });
 
   return (
-    <LogsLLMSearch
+    <LLMSearch
       exampleQueries={[
         "Show failed requests today",
         "Show auth errors in the last 3h",

@@ -1,6 +1,6 @@
-import { LogsLLMSearch } from "@/components/logs/llm-search";
 import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
+import { LLMSearch } from "@unkey/ui";
 import { transformStructuredOutputToFilters } from "@unkey/ui";
 import { useFilters } from "../../../../hooks/use-filters";
 
@@ -41,7 +41,7 @@ export const LogsSearch = () => {
   });
 
   return (
-    <LogsLLMSearch
+    <LLMSearch
       exampleQueries={[
         "Show all identifiers that is test",
         "Show all identifiers that include cust_",

@@ -1,6 +1,6 @@
-import { LogsLLMSearch } from "@/components/logs/llm-search";
 import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
+import { LLMSearch } from "@unkey/ui";
 import { transformStructuredOutputToFilters } from "@unkey/ui";
 import { useFilters } from "../../../../hooks/use-filters";
 
@@ -41,7 +41,7 @@ export const LogsSearch = () => {
   });
 
   return (
-    <LogsLLMSearch
+    <LLMSearch
       exampleQueries={[
         "Show failed requests today",
         "Show passed requests from the last 1 hour",

@@ -1,6 +1,6 @@
-import { LogsLLMSearch } from "@/components/logs/llm-search";
 import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
+import { LLMSearch } from "@unkey/ui";
 import { useRef } from "react";
 
 type LogsSearchProps = {
@@ -39,7 +39,7 @@ export const LogsSearch = ({ setNamespaces, initialNamespaces }: LogsSearchProps
   };
 
   return (
-    <LogsLLMSearch
+    <LLMSearch
       exampleQueries={[
         "Show failed requests today",
         "Show passed requests from the last 1 hour",

@@ -1,7 +1,7 @@
-import { LogsLLMSearch } from "@/components/logs/llm-search";
 import { transformStructuredOutputToFilters } from "@/components/logs/validation/utils/transform-structured-output-filter-format";
 import { toast } from "@/components/ui/toaster";
 import { trpc } from "@/lib/trpc/client";
+import { LLMSearch } from "@unkey/ui";
 import { useFilters } from "../../../../hooks/use-filters";
 
 export const RootKeysSearch = () => {
@@ -41,7 +41,7 @@ export const RootKeysSearch = () => {
   });
 
   return (
-    <LogsLLMSearch
+    <LLMSearch
       exampleQueries={[
         "Show keys with api.read permissions",
         "Show keys containing database permissions",

@@ -4,10 +4,6 @@ description: 'A component for displaying keyboard shortcuts with optional modifi
 ---
 import { Default } from "./keyboard-button.examples"
 
-# KeyboardButton
-
-The `KeyboardButton` component is designed to display keyboard shortcuts in a visually appealing and accessible way. It supports displaying both regular keys and modifier keys (like ⌘, ⇧, CTRL, ⌥) in a consistent format.
-
 ## Features
 
 - Displays keyboard shortcuts with optional modifier keys

@@ -2,7 +2,6 @@
 title: Card
 description: A flexible container component for grouping related content with optional header, footer, and content sections.
 ---
-
 import { BasicCard, CardWithHeader, CardWithFooter, CompleteCard, MetricCard, CardGrid } from "./card.example"
 
 ## Basic Usage

@@ -1,14 +1,9 @@
 ---
 title: SettingCard
-description: A card component for settings options.
+description: The SettingCard component provides a consistent layout for settings sections in your application. It includes a title, description, and content area with optional styling options.
 ---
-
 import { SettingsCardBasic, SettingsCardsWithSharedEdge, SettingsCardsWithSquareEdge, SettingsCardsWithDivider } from "./settings-card.example"
 
-# SettingCard
-
-The SettingCard component provides a consistent layout for settings sections in your application. It includes a title, description, and content area with optional styling options.
-
 ## Basic Usage
 
 The basic SettingCard includes a title, description, and content area.

@@ -5,10 +5,6 @@ description: A versatile code component for displaying inline and block code sni
 
 import { CodeExample, CodeVariants } from "./code.example";
 
-# Code
-
-The Code component provides a consistent way to display code snippets within your application. It supports both inline and block code display with customizable styling options and integrated button functionality.
-
 ## Features
 
 - Multiple variants (default, ghost, legacy)

@@ -25,12 +25,6 @@ import {
   CheckboxGroupExample,
 } from "./checkbox.examples";
 
-# Checkbox
-
-A versatile checkbox component that supports various styles, states, and interactive features. Checkbox is built with accessibility in mind and provides consistent interaction patterns across all variants.
-
-Each checkbox can be customized with different variants, colors, and sizes, making it adaptable to any UI context. All checkboxes include proper focus states and keyboard interactions.
-
 ## Basic Variants
 
 Checkbox comes in three basic variants that serve different UI purposes:

@@ -18,10 +18,6 @@ import {
   ComplexFormCheckboxVariant
 } from "./form-checkbox.variants"
 
-# FormCheckbox
-
-A comprehensive checkbox component that combines labels, descriptions, and validation states. Perfect for creating accessible, user-friendly forms that require selection inputs with proper labeling and helpful context.
-
 ## Default
 
 The default FormCheckbox includes a label and optional description text, providing clear context for users.

@@ -16,10 +16,6 @@ import {
   ComplexFormInputVariant
 } from "./form-input.variants"
 
-# FormInput
-
-A comprehensive form input component that combines labels, descriptions, and validation states. Perfect for creating accessible, user-friendly forms with proper labeling and helpful context.
-
 ## Default
 
 The default FormInput includes a label and optional description text, providing clear context for users.

@@ -16,10 +16,6 @@ import {
   ComplexFormTextareaVariant
 } from "./form-textarea.variants"
 
-# FormTextarea
-
-A comprehensive multi-line text input component that combines labels, descriptions, and validation states. Perfect for creating accessible, user-friendly forms that require longer text inputs with proper labeling and helpful context.
-
 ## Default
 
 The default FormTextarea includes a label and optional description text, providing clear context for users.

@@ -1,11 +1,13 @@
 ---
 title: Select
-description: A customizable select component built with Radix UI
+description: A customizable dropdown menu component built on Radix UI primitives with multiple visual variants.
 ---
 
 import { SelectExample, SelectExampleVariants } from "./select.example";
 
-The Select component is a customizable dropdown menu built on top of Radix UI's Select primitive. It provides a flexible and accessible way to create select inputs with various styling options.
+## Overview
+
+The Select component provides a consistent and accessible way to present users with a list of options, making it ideal for forms, navigation menus, and any interface requiring user selection from predefined choices. The component handles complex interactions like keyboard navigation, focus management, and screen reader compatibility automatically, allowing developers to focus on styling and business logic rather than accessibility implementation details.
 
 ## Features
 

@@ -14,9 +14,6 @@ import {
   TextareaWithBothIcons
 } from "./textarea.variants.tsx"
 
-# Textarea
-
-A versatile multi-line text input component that supports various states, validations, and icon placements. Use it to collect longer user input with appropriate visual feedback and enhanced usability through icons.
 
 ## Default
 

@@ -5,10 +5,6 @@ description: A component for creating inline links with optional icons and styli
 
 import { InlineLinkBasic, InlineLinkWithIcon, InlineLinkWithTarget, InlineLinkWithCustomClass } from "./inline-link.example"
 
-## InlineLink
-
-The InlineLink component provides a consistent way to create inline links within text content. It supports icons, custom styling, and target attributes. The component extends all standard HTML anchor element attributes for maximum flexibility.
-
 ## Basic Usage
 
 The basic InlineLink includes a label and href.