Molecules
Composite components built from atoms. Each molecule combines 2+ atoms into a reusable pattern.
18 molecules · 4 categories
Form & Input
5 componentsData entry, search, and parameter controls.
Form Field
Label + Input + Helper/Error text. Vertical layout with consistent spacing.
Composed of: Label + Input/Textarea/Select + Helper/Error text
Variants
A descriptive name for your prompt
System prompt is required
<FormField label="Name" required helper="..." error="..."><Input /></FormField>
Search Bar
Input with search icon, clear button, and keyboard shortcut hint.
Composed of: Icon + Input + Clear Button + Kbd
<SearchBar value={search} onChange={setSearch} placeholder="..." showShortcut />Parameter Control
Labeled slider + numeric input for model parameters like temperature and top_p.
Composed of: Label + Slider + Input
<ParameterControl label="Temperature" value={0.7} onChange={fn} min={0} max={2} step={0.01} />Field Header
Header bar for a labeled field section with colored dot, label, token count, and actions.
Composed of: Dot + Label + TokenCounter + Actions slot
<FieldHeader field="role" label="Role" tokenCount={120} required actions={...} />Variable Editor Row
Name/value input pair with delete button and highlight state for variable management.
Composed of: Input (name) + Input (value) + Delete Button
<VariableEditorRow name="user" value="John" highlighted onDelete={fn} />Data & Display
5 componentsStats, identity, tokens, variables, and diff views.
Stat Card
KPI display with label, mono value, and trend indicator.
Composed of: Label + Value (font-mono) + Trend
Total Prompts
1,247
+12.5%
Evaluations
384
-3.2%
Avg Score
87.3
0.0%
Active Users
23
+2
<StatCard label="Total Prompts" value="1,247" trend={{ direction: "up", value: "+12.5%" }} />Avatar Group
Avatar with name and optional role text.
Composed of: Avatar + Name + Role text
Sizes
Mariano R.
Designer
Jane Doe
Engineer
Alex Kim
Product Manager
<AvatarGroup name="Mariano" role="Designer" size="md" status="online" />
Token Counter
Token count with thin progress bar. Color by threshold: safe/warning/danger.
Composed of: Text (font-mono) + Progress (60px×3px)
<TokenCounter current={1200} max={4000} compact />Variable Highlight
Inline styled {{variable}} token with click interaction and unresolved state.
Composed of: Styled button with mono text
<VariableHighlight name="user_name" resolvedValue="John" unresolved onClick={fn} />Diff Line
A single line in a diff view with line number, +/− prefix, and semantic coloring.
Composed of: Line number + prefix + text
<DiffLine lineNumber={1} type="added" text="New line content" />Activity & Status
3 componentsEmpty states, feed items, and run history.
Empty State
Centered placeholder for empty views with title, description, and CTA.
Composed of: Title + Description + CTA Button
No items yet
Create your first item to get started.
<EmptyState title="..." description="..." action={{ label: "Create", onClick: fn }} />Activity Feed Item
A single row in an activity feed showing user, action, target, and timestamp.
Composed of: Avatar + User + Badge + Target + Timestamp
Changed temperature from 0.7 to 0.3
Looks good, ready for production
<ActivityFeedItem user="Mariano" type="created" target="Bot" timestamp="2m ago" detail="..." />
Run History Item
A single run entry showing model, status, token usage, latency, and timestamp.
Composed of: Run ID + Model + Status Badge + Tokens + Latency + Timestamp
<RunHistoryItem runId="#1042" model="claude-3.5-sonnet" status="success" tokens={1247} latencyMs={820} timestamp="2m ago" />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