@sqlite-hub/ui

React UI components for sqlite-hub database viewer, SQL editor, and results explorer.

Features

• 🎨 Modern, composable React components
• 📝 SQL editor with syntax highlighting (CodeMirror)
• 📊 Results grid with sorting and filtering
• 🌳 Database schema browser
• 🔍 Query history
• 🎯 Built on Radix UI with Tailwind CSS

Installation

npm install @sqlite-hub/ui
# or
pnpm add @sqlite-hub/ui

Quick Start

import { DbViewer } from '@sqlite-hub/ui/board';

function App() {
  async function queryDb(sql: string, params?: any[]) {
    const response = await fetch('/api/db/my-db/query', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ sql, params })
    });
    return response.json();
  }

  return (
    <DbViewer 
      dbId="my-db"
      queryFn={queryDb}
      tables={['users', 'posts', 'comments']}
    />
  );
}

export default App;

Components

DbViewer

Main component combining editor, results, and schema browser.

<DbViewer
  dbId="string"
  queryFn={(sql, params) => Promise}
  tables={string[]}
/>

SqlEditor

Standalone SQL editor with CodeMirror.

<SqlEditor
  value={sql}
  onChange={setSql}
  readOnly={false}
/>

ResultsGrid

Display query results in a scrollable grid.

<ResultsGrid
  rows={data}
  columns={columns}
  loading={false}
/>

Styling

Components use Tailwind CSS classes. Make sure your project has Tailwind configured:

npm install tailwindcss

License

MIT