Organisms
Complex components composed of molecules and atoms. These form the major UI sections.
19 components · 4 categories
Top Bar / Header
56px sticky header with search command button.
Composed of: SearchBar + Kbd
<TopBar onMenuClick={fn} actions={<Button />} />Filter Bar
Search + status chips + sort + view toggle for library filtering.
Composed of: SearchBar + Badge chips + Select + Button group
<FilterBar search={search} onSearchChange={setSearch} />Bulk Actions Bar
Sticky bottom bar for multi-select actions. Slides in from bottom.
Composed of: Badge count + Button group + dismiss
<BulkActionsBar selectedCount={3} onDismiss={fn} onMove={fn} onTag={fn} onArchive={fn} onDelete={fn} />Dashboard & Data
6 componentsData display, metrics, authentication, and activity tracking.
Data Table
Sortable columns, mono headers uppercase, hover with orange left border accent.
Composed of: Table headers + sortable columns + rows + pagination
| Updated | |||
|---|---|---|---|
| Customer Support Bot | production | 2847 | 2h ago |
| Code Review Assistant | testing | 1523 | 5h ago |
| Marketing Copy Writer | draft | 890 | 1d ago |
<DataTable columns={[...]} data={[...]} pageSize={5} onRowClick={fn} />Auth Form
Centered card with social login, email/password, and mode toggle (login/signup).
Composed of: FormField + Input + Button + Separator + Social buttons
Dashboard Stats
4-column stat grid. Auto-fit min 200px columns.
Composed of: StatCard × 4
Total Prompts
1,247
+12%
Evaluations
384
+8%
Avg Score
87.3
0.0%
Active Users
23
-2
<DashboardStats />
Activity Feed
Scrollable list of activity items. Max-height 400px.
Composed of: Avatar + Text + Code + timestamps
Recent Activity
Mariano updated Customer Support Bot v3
2 minutes ago
Jane created evaluation for Code Review Assistant
1 hour ago
Alex promoted to production Data Analysis Helper
3 hours ago
Mariano added variable to Marketing Copy Writer
yesterday
<ActivityFeed items={[{ actor, initials, action, resource, time }]} />Run History
Scrollable list of playground/evaluation run entries with success/error header stats.
Composed of: RunHistoryItem × N + summary header
<RunHistory runs={[...]} onRunClick={fn} />API Doc Panel
Collapsible API endpoint documentation with HTTP method badges and sample request/response code.
Composed of: Badge (method) + endpoint list + code blocks
https://api.example.com/v1Authorization: Bearer <your-api-key><APIDocPanel />
Settings & Config
5 componentsAPI keys, integrations, onboarding, and settings navigation.
API Key Manager
Manages API keys with masked values, reveal toggle, add form, and delete.
Composed of: Input + Button + Badge + eye toggle
<APIKeyManager keys={[{ id, name, provider, maskedValue, createdAt }]} onAdd={fn} onDelete={fn} />Integration Card
External service card with connection status and connect/disconnect actions.
Composed of: Badge + Button + avatar
GPT-4, GPT-3.5 Turbo, and DALL·E models for generation and analysis.
Claude models for safe, helpful AI assistance.
Gemini models for multimodal understanding.
<IntegrationCard name="OpenAI" provider="OpenAI" description="..." connected status="active" onConnect={fn} />Onboarding Wizard
Step-by-step onboarding flow with progress indicator and navigation.
Composed of: Badge + Button + step circles
Create Your First Project
Use the editor to set up a new workspace project.
<OnboardingWizard steps={[{ id, title, description, completed }]} currentStep={0} onNext={fn} onSkip={fn} />Organization Manager
Tab and tag management for workspace organization — create, rename, reorder, and delete.
Composed of: Input + Badge + Dialog + RadioGroup + Button
Project folders shown in the sidebar. Prompts can belong to up to 5 tabs.
Labels for categorization. Prompts can have multiple tags.
<OrganizationManager />
Import & Export
3 componentsContent import and export in multiple formats.
Import Dialog
Multi-format import with paste area and file drop zone.
Composed of: Textarea + Button + format selector
Or drop a .json file here
<ImportDialog onImport={(content, format) => {}} onCancel={fn} />Data Manager
Export, import, and clear workspace data — with confirmation dialogs for destructive actions.
Composed of: Checkbox + Button + Dialog
Select data to include in your export file (JSON format).
Drop a .json file here or click to browse
Supports democrito export format
Remove all prompts, variables, and presets. This cannot be undone.
Permanently remove your account and all data.
<DataManager />
Contact
Questions, collaborations, or feedback on democrito — reach out on LinkedIn or via hola@atomic-products.com.
Made with ❤️ from 🇪🇸 by Mariano · github.com/mmorerasanchez/democrito