democrito

democrito

v3

Atoms

Base-level components — the building blocks of the design system.

10 atoms · 4 categories

Form & Input

4 components

Interactive controls and data entry components.

Button

Primary interactive element. Extends shadcn/ui Button with design system token styling, loading state, and theme-inverted primary.

Variants

Sizes

With Icons

States

<Button variant="default | secondary | destructive | outline | ghost | link" size="sm | default | lg | icon" loading={boolean} />

Input

Text input — always font-mono per spec. Card bg with accent focus ring. Extends shadcn/ui Input.

States

<Input placeholder="..." error={boolean} disabled={boolean} />

Textarea

Multi-line text input — always font-mono. Auto-resize variant. Min 80px, max 300px.

States

<Textarea placeholder="..." error={boolean} />

Form Elements

Checkbox, Radio (via Select), Switch, Select, Slider — all using shadcn/ui base with design tokens.

Checkbox

Switch

Select

Slider

0.50

Labels & Typography

4 components

Badges, tags, and typographic display components.

Badge

Pill-shaped labels using font-mono. Status, semantic, and count variants.

Default Variants

Default
Secondary
Destructive
Outline

Status

Draft
Testing
Production
Archived

Semantic

Success
Warning
Error
Info

Count & Dot

3
42
Online Busy

Sizes

Small
Default
Large
<Badge variant="default | draft | testing | production | archived | claude | gpt | gemini | lovable | success | warning | error | info | count" size="sm | default | lg" />

Tag

Border-based labels with optional remove and selectable states. Font-mono, text-xs.

Variants

defaultcoloredremovableselectableselected
<Tag variant="default | removable | selectable" color="role" selected />

Typography

Reusable Heading, Text, Code, and Kbd components enforcing the design system type scale.

Heading Levels

H1 — Page Title

H2 — Section Heading

H3 — Card Title

H4 — Subsection

Text Variants

Default body text

Muted text for secondary info

Subtle text for tertiary info

Accent text

Error text

Success text

Monospace text for data values

Code & Kbd

Inline code snippet in textPress ⌘ + K to search
<Heading level="h1 | h2 | h3 | h4" />
<Text variant="default | muted | subtle | accent | error | success" size="xs | sm | base | lg" mono={boolean} />
<Code>inline code</Code>
<Kbd>⌘K</Kbd>

Avatar

Circular avatar with image, initials fallback, status indicator. Sizes: xs(20), sm(28), md(36), lg(48).

Sizes with Fallback

XSSMMDLG

With Status

MRJDAK

Stacked Group

MRJDAKBL
<Avatar size="xs | sm | md | lg"><AvatarFallback>MR</AvatarFallback><AvatarStatus status="online" /></Avatar>

Feedback & State

4 components

Loading states, overlays, and interaction feedback.

Separator

1px border color line. Horizontal or vertical.

Left
Right

Skeleton

Loading placeholder with 1.5s pulse animation. Respects prefers-reduced-motion.

Spinner & Thinking Dots

Loading indicators. Spinner: accent border-top spin. Thinking dots: 3×6px staggered pulse.

Spinner Sizes

Loading…
Loading…
Loading…
Loading…

Thinking Dots

<Spinner size="sm | md | lg | inline" />
<ThinkingDots />

Tooltip

Inverted colors, font-body, text-xs, radius-sm, max-width 240px. Radix Tooltip.

Utilities

3 components

Progress indicators, links, and form labels.

Progress Bar

4px height, accent fill, rounded-full. Semantic color variants. Determinate + indeterminate.

Variants

default (65%)
success (100%)
warning (80%)
error (95%)
<Progress value={65} variant="default | success | warning | error | info" indeterminate={boolean} />

Label

Form label. font-body, text-sm, font-medium. Required state with asterisk.

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