ThemeProvider
Supplies reactive light, dark, and system theme state.
Theme contextOne preference, resolved before paint.
Theme contextOne preference, resolved before paint.
Theme context One preference, resolved before paint.
Components
One visual contract, three ways to build.
Every adapter renders the same cf-* class and data-state vocabulary. Choose the idioms of your framework without forking the design language.
Foundation and layout
Theme, typography, semantic navigation, and composable layout primitives.
ThemeScript
Applies the saved theme before first paint.
<ThemeScript /><ThemeScript /><ThemeScript />ThemeToggle
Accessible three-way theme preference control.
SkipLink
Keyboard shortcut to the primary page content.
Focus this frame, then press Tab.
Skip to preview content
Preview content target
Focus this frame, then press Tab.
Skip to preview content
Preview content target
Focus this frame, then press Tab.
Skip to preview content
Preview content target
AppShell
Full-height application shell with a sticky-footer main region.
Header
Main content grows
Header
Main content grows
Header
Main content grows
Heading
Responsive heading hierarchy from h1 through h6.
Content comes first.
Content comes first.
Content comes first.
Text
Body, muted, lead, small, and caption text styles.
Readable body text for long-form content.
Supporting metadata stays quiet.
Readable body text for long-form content.
Supporting metadata stays quiet.
Readable body text for long-form content.
Supporting metadata stays quiet.
Link
Accessible inline and standalone navigation links.
API and examples →Prose
Long-form article typography and media rhythm.
Long-form rhythm
Headings, paragraphs, links, and inline code share a comfortable reading measure.
Long-form rhythm
Headings, paragraphs, links, and inline code share a comfortable reading measure.
Long-form rhythm
Headings, paragraphs, links, and inline code share a comfortable reading measure.
Container
Centered responsive content width.
A centered, narrow content container.
A centered, narrow content container.
A centered, narrow content container.
Section
Vertical page section with consistent spacing.
Foundation
A clear section
Semantic page rhythm.
Section content follows its optional header.
Foundation
A clear section
Semantic page rhythm.
Section content follows its optional header.
Foundation
A clear section
Semantic page rhythm.
Section content follows its optional header.
Stack
Vertical flow layout with token-based gaps.
FirstSecondThird
FirstSecondThird
FirstSecondThird
Inline
Wrapping horizontal layout with alignment controls.
OneTwoThree
OneTwoThree
OneTwoThree
Separator
Horizontal or vertical divider for grouping related content.
Account settings
Notification settings
Notification settings
LightDark
Account settings
Notification settings
Notification settings
LightDark
Account settings
Notification settings
Notification settings
LightDark
Actions and forms
Everyday controls with consistent focus, validation, and disabled states.
Button
Primary, secondary, ghost, and danger actions.
IconButton
Compact labelled action for a single Lucide icon.
Field
Label, hint, required, and error message composition.
Use a short, recognizable name.
A slug is required.
Use a short, recognizable name.
A slug is required.
Use a short, recognizable name.
A slug is required.
TextField
Single-line text and search input.
We only use this for replies.
Enter a valid address.
Textarea
Multi-line text entry with validation styling.
20 characters
A summary is required.
Select
Native selection control styled by the system.
Choose how the interface resolves color.
Choose an available option.
Checkbox
Boolean selection with a visible native control.
Switch
Immediate boolean setting with switch semantics.
Radio
Single native radio choice with supporting description.
RadioGroup
Labelled single-selection group with validation and orientation.
Combobox
Filterable autocomplete with listbox keyboard navigation.
Type to filter, then use arrow keys and Enter.
AstroContent-driven web framework
ReactComponent library
SvelteCompiler-first framework
VueProgressive framework
Type to filter, then use arrow keys and Enter.
AstroContent-driven web framework
ReactComponent library
SvelteCompiler-first framework
VueProgressive framework
Type to filter, then use arrow keys and Enter.
Astro Content-driven web framework
React Component library
Svelte Compiler-first framework
Vue Progressive framework
FileUpload
Native file picker with drag-and-drop selection and limits.
Slider
Native range input with bindable value and formatted output.
Captcha
Controlled, presentation-only human-verification surface inspired by Cap.
Display and feedback
Surfaces, labels, status messaging, and empty states.
Badge
Compact semantic status label.
NeutralAccentInfoSuccessWarningDanger
NeutralAccentInfoSuccessWarningDanger
Neutral Accent Info Success Warning Danger
Tag
Static or interactive content taxonomy label.
taxonomydesign systems
taxonomydesign systems
taxonomy design systems
Alert
Info, success, warning, and danger callout.
Note
Shared contract.
Saved
The update is live.
Review
Check this value.
Failed
Try again.
Note
Shared contract.
Saved
The update is live.
Review
Check this value.
Failed
Try again.
Card
Neutral, accent, and interactive content surface.
Default
Quiet structure.
Elevated
Raised context.
Outlined
Interactive Defined boundary.
Linked surface.
EmptyState
Concise no-data explanation and next action.
No posts yet
Publish the first note when it is ready.
No posts yet
Publish the first note when it is ready.
No posts yet
Publish the first note when it is ready.
CodeBlock
Readable source code with an optional language label and copy action.
const preference = "system";
applyTheme(preference);
const preference = "system";
applyTheme(preference);const preference = "system";
applyTheme(preference);TerminalCodeBlock
Terminal transcript with copyable commands and ANSI-styled output.
npm install @cofob/design-system-cssadded 1 package in 842msnpm run build -- --mode production✓ 51 pages built
Report: design.cofob.devnpm install @cofob/design-system-cssadded 1 package in 842msnpm run build -- --mode production✓ 51 pages built
Report: design.cofob.devnpm install @cofob/design-system-cssadded 1 package in 842msnpm run build -- --mode production✓ 51 pages built
Report: design.cofob.devAsciinemaPlayer
SSR-safe terminal recording player with token-driven theme and fallback states.
Terminal demonstration
Terminal demonstration
Terminal demonstration
Table
Accessible responsive data table with explicit surfaces, density, and striped rows.
| Package | Adapter | Status |
|---|---|---|
| CSS | Native | Ready |
| React | React 19 | Ready |
| Svelte | Svelte 5 | Ready |
| Package | Adapter | Status |
|---|---|---|
| CSS | Native | Ready |
| React | React 19 | Ready |
| Svelte | Svelte 5 | Ready |
| Package | Adapter | Status |
|---|---|---|
| CSS | Native | Ready |
| React | React 19 | Ready |
| Svelte | Svelte 5 | Ready |
Progress
Determinate or indeterminate task progress with native semantics.
64%
64%
64%
Spinner
Compact live loading indicator with an accessible label.
Loading small previewLoading previewLoading large preview
Loading small previewLoading previewLoading large preview
Loading small preview Loading preview Loading large preview
CircularProgress
Determinate circular loader with an accessible percentage value.
24%64%
24%64%
24% 64%
Skeleton
Slowly pulsing placeholder for text, media, and circular content.
AudioPlayer
Compact accessible playback, seek, time, mute, and volume controls.
0:00 / 0:03
0:00 / 0:02
0:00 / 0:02
VideoPlayer
Responsive native video playback with caption and aspect-ratio support.
0:00 / 0:03
0:00 / 0:02
0:00 / 0:02
Navigation and interaction
Stateful patterns backed by the platform and shared vanilla controllers.
Pagination
Previous, numbered, and next page navigation.
Breadcrumbs
Hierarchical page trail with a current-page endpoint.
Stepper
Ordered multi-step progress and optional step navigation.
Dialog
Modal dialog using the native dialog element.
Drawer
Edge-aligned modal sheet using the native dialog element.
Popover
Light-dismiss non-modal floating content.
Semantic detailsHelpful contextual content.
Semantic detailsHelpful contextual content.
Semantic details Helpful contextual content.
DropdownMenu
Roving-focus action menu with typeahead.
API and examples →Tabs
Automatic or manual tab activation.
A shared semantic class contract.
Typed React adapters.
Svelte 5 adapter.
A shared semantic class contract.
Typed React adapters.
Svelte 5 adapter.
A shared semantic class contract.
Typed React adapters.
Svelte 5 adapter.
Accordion
Single or multiple disclosure sections.
What is shared?
Tokens, classes, states, and behavior.
Which frameworks?
Native, React, and Svelte.
What is shared?
Which frameworks?
Native, React, and Svelte.
What is shared?
Tokens, classes, states, and behavior.
Which frameworks?
Native, React, and Svelte.
Tooltip
Supplementary hover and focus description.
More information
ToastProvider
Owns queued transient notification state.
ToastViewport
Polite and assertive toast live region.
Brand and content
Recognizable cofob.dev brand treatments and publishing patterns.
BlueLine
Sky or rainbow marker stroke behind inline content.
Hello, cofob.dev.
Hello, cofob.dev.
Hello, cofob.dev.
Navbar
Router-independent brand and navigation shell.
API and examples →Footer
Copyright, feed, license, and secondary link footer.
API and examples →PostCard
Article preview with cover, dates, tags, and action.
API and examples →LatestPostCard
Compact highlighted latest-publication link.
API and examples →SearchResultCard
Search result summary with metadata.
API and examples →ResponsiveImage
Intrinsic image with srcset and loading controls.
Avatar
Responsive avatar image with accessible initials fallback.
GHGH GHInlineEmoji
Semantically labelled inline emoji image aligned with text.
Semantic inline image stays aligned with text.
Semantic inline image stays aligned with text.
Semantic inline image stays aligned with text.
MediaGrid
Responsive one- or two-column list for image, video, and audio media.
ChatThread
Accessible message transcript with decorative avatars.
- Ship the semantic contract first.
- cofob: Then every adapter stays aligned.
- The consecutive messages read as one group.
- reader: Read the implementation notes
- Ship the semantic contract first.
- cofob: Then every adapter stays aligned.
- The consecutive messages read as one group.
- reader: Read the implementation notes
- Ship the semantic contract first.
- cofob: Then every adapter stays aligned.
- The consecutive messages read as one group.
- reader: Read the implementation notes
Sticker
Attributed sticker figure with required alternative text.
🦊 cofob.dev
Source: PhSilver sticker pack
🦊 cofob.devSource: PhSilver sticker pack
🦊 cofob.dev Source: PhSilver sticker pack
AnimatedSticker
Converted Telegram animation with an inline SVG or optimized WebP first frame.
AnimatedStickerToggle
Persisted global switch between animated WebM stickers and static SVG/WebP first frames.