Developer Tools

Build Faster with Stencils

Accelerate your development with our pre-built components, hooks, and tools. Each stencil is designed for maximum reusability and easy customization.

Data Table

Advanced table component with sorting, filtering, pagination, and export functionality

<DataTable
    data={data}
    columns={columns}
    sorting
    filtering
    pagination
    exportOptions={['csv', 'json']}
  />
npm install @krouly/uiView Documentation
IDNameStatus
1Model ATraining
2Model BComplete
3Model CFailed

Command Palette

Searchable command palette with keyboard navigation and customizable actions

<CommandPalette
    commands={commands}
    onCommand={handleCommand}
    hotkey="cmd+k"
    theme="dark"
  />
npm install @krouly/uiView Documentation
Open Project⌘P
Search Files⌘F

Form Builder

Drag-and-drop form builder with validation and custom field types

<FormBuilder
    fields={fields}
    onSubmit={handleSubmit}
    validation={schema}
    customFields={[]}
  />
npm install @krouly/uiView Documentation
Preview not available

AI Chat Interface

Pre-built chat interface for AI interactions with streaming support

<AIChatInterface
    model="gpt-4"
    stream={true}
    history={chatHistory}
    onResponse={handleResponse}
  />
npm install @krouly/uiView Documentation
AI
How can I help you today?
U
Can you analyze this dataset?

Model Training Dashboard

Visualization dashboard for ML model training metrics and parameters

<TrainingDashboard
    metrics={trainingMetrics}
    parameters={modelParams}
    onEpochEnd={handleEpoch}
  />
npm install @krouly/uiView Documentation

Training Progress

Epoch 3/10
Loss: 0.342
Accuracy: 89.4%
Learning Rate: 0.001
Explore All Stencils