Welcome to Cito! 👋 This is a collection of UI elements built with native HTML and CSS, with just a small amount of JavaScript. Cito is designed as a drop-in starting point for any UI project. You can use it directly in web-based applications, with or without UI frameworks, or as a fast way to prototype interfaces for native apps. Cito follows a few simple principles: it uses only web standards (framework and tooling agnostic), and it is simple, functional, easy to modify, and useful out of the box. Have fun using it!
Cito uses a Major Second type scale with IBM Plex Mono as the default monospace font.
This is a regular paragraph with a link element.
Cito includes semantic color variables that adapt to light/dark mode:
Cito provides several button variants:
Styled form groups with labels, inputs, and error states:
Custom styled checkboxes with clip-path animations:
Display data in structured key-value format using semantic HTML (dl, dt, dd):
Full-width alert containers for displaying important messages:
Interactive menus with complex options using the Popover API:
Dropdowns use the native Popover API for automatic positioning and dismiss behavior.
Informational popovers with styled content using the Popover API:
This is an informational popover with helpful context about a feature.
Your operation completed successfully.
Please review this information carefully before proceeding.
An error occurred. Please check your input and try again.
This is a simple popover without a title.
Popovers automatically position themselves and dismiss when clicking outside.
Flexible card components with hover effects:
This is a standard card component with title, body, and optional footer actions.
Use the "highlighted" variant to emphasize important cards with primary colors.
The "compact" variant reduces padding for denser layouts.
Use this variant to indicate successful operations or positive states.
Use this variant to draw attention to cautionary information.
Use this variant to highlight errors or critical issues that need attention.
Interactive 3D model viewer with carousel navigation. Drag to rotate, scroll to zoom.
The <cito-3d-carousel> web component is completely self-contained with no other dependencies than ThreeJS.
Models are loaded from glTF files and can be rotated interactively. API is simple: just provide an array of model URLs, then use methods: next, prev, goTo, setSize, getCurrentIndex, getModelCount. Use the hide-controls attribute to hide built-in navigation.
Card-style list items with image, content, and actions:
This is a horizontal card layout with a placeholder image on the left, content in the middle, and action buttons on the right.
Perfect for displaying lists of items with consistent structure and quick actions.
Hover over items to see the subtle background transition effect.
Horizontal tab navigation with content panels:
This is the Overview tab content. Click on tabs above to switch between different content panels.
This is the Features tab. The active tab is highlighted with a border bottom and bold text.
This is the Settings tab. CSS classes manage visibility while JavaScript handles the click events.
Vertical tab navigation with side-by-side layout:
Manage your profile information and preferences here. The vertical layout works well for settings pages.
Configure your security preferences, passwords, and two-factor authentication.
Control which notifications you receive and how you're notified.
Advanced configuration options for power users.
Native HTML details/summary with animated transitions:
Cito is a drop-in CSS framework that provides productive and standard-based UI development. It uses CSS custom properties for theming and supports both light and dark color schemes automatically.
Use the semantic color variables like var(--cito-primary-500) for backgrounds and var(--cito-text-900) for text. These automatically adapt to the user's color scheme preference.
Yes! All components use CSS custom properties that you can override. Each component defines its own local variables that you can customize without affecting other components.
This details element is open by default using the open attribute.
Native HTML datalist for autocomplete functionality:
Responsive tables that transform into card-style layouts on mobile viewports (≤32rem/512px):
On desktop, tables display in standard grid format. On mobile, each row becomes a vertical card with labels.
Note: Each td element requires a data-col attribute for mobile labels.
| Project | Status | Owner | Priority | Due Date |
|---|---|---|---|---|
| Cito Design System | In Progress | Design Team | High | 2025-12-15 |
| Component Library | Planning | Dev Team | Medium | 2025-12-30 |
| Documentation Site | Completed | Technical Writers | Low | 2025-11-20 |
| Testing Framework | In Progress | QA Team | High | 2025-12-10 |
Row backgrounds display as horizontal bar charts. Use data-bar-width
(percentage) and data-bar-color (any CSS color) on each tr.
Wrap cell content in <span> for text readability.
| Revenue ($K) | Region | Manager | Growth |
|---|---|---|---|
| 142 | North America | Sarah Chen | +24% |
| 111 | Europe | Marcus Weber | +18% |
| 80 | Asia Pacific | Yuki Tanaka | +31% |
| 60 | Latin America | Carlos Silva | +12% |
| Feature | Free | Pro | Enterprise |
|---|---|---|---|
| Basic Components | ✓ | ✓ | ✓ |
| Advanced Layouts | — | ✓ | ✓ |
| Custom Themes | — | ✓ | ✓ |
| Priority Support | — | — | ✓ |
Tables with action buttons - actions stay right-aligned on desktop and appear last on mobile.
| Name | Role | Last Active | Actions | |
|---|---|---|---|---|
| Aino Esimerkki | aino.esimerkki@example.com | Admin | 2025-11-29 | |
| Erik Exempel | erik.exempel@example.com | Editor | 2025-11-28 | |
| Sofia Mallikas | sofia.mallikas@example.com | Viewer | 2025-11-30 | |
| Mikael Esimerkki | mikael.esimerkki@example.com | Editor | 2025-11-27 |
Click "Details" to expand/collapse additional information for each row.
| Order ID | Customer | Total | Status | Actions |
|---|---|---|---|---|
| #ORD-2001 | Aino Esimerkki | $459.99 | Shipped | |
Order Details
|
||||
| #ORD-2002 | Lars Exempel | $89.50 | Processing | |
Order Details
|
||||
| #ORD-2003 | Elina Mallikas | $1,299.00 | Delivered | |
Order Details
|
||||
Resize your browser to see the responsive transformation in action!