Intro

Clad UI Design System is a system of design tokens, guidelines, theming solution and components library that helps Chotot front end and mobile engineers build consistent UIs faster and more satisfyingly.

Why the name Clad UI?

Clad is the short form of classified ads, which is the main product of our group, besides, clad also mean “to be dressed or to be coated”

What Clad UI Design System is

• A unified solution for styling components for Chotot Web user-facing platforms
• A theme specifications that define primitive Clad UI design tokens
• A collection of reusable components from atomic inputs to composite components
• A workbench (a.k.a kitchen sink) to preview all available components and their usage guide
• A set of CLI tools to assist generate new components...

What Clad UI Design System is NOT

• A base framework for doing Chotot web apps (refer to Next.js framework)
• An end user-facing web app
• Any full web page

Colophon (A.K.A prerequisites to this design system)

Building components:

• 📚 Storybook for UI component development and auto-generated docs
• ⚛️ React declarative component-centric UI. React is also our core UI library of Front End development
• 💅 Linaria which enable CSS-in-JS styling and extract all CSS to external CSS file.
• 📄 System UI Theme Specification as a standard design token format with theme-aware css props helper
• ⬇️ MDX (part of Storybook) for seamless React / JSX documentation

Maintaining the system:

• 🐟 Babel and module resolver plugin for transpiling modern JS and static theming
• 📦 NPM for packaging and distribution
• 🟧 pnpm as package manager's CLI
• 🧪 Jest as test runner for unit testing
• 🐐 react-testing-library to assist unit testing React components
• 🚥 Github Actions for Continuous integration (test and publish)
• ✅ Chromatic to prevent UI bugs in components (by Storybook maintainers)

Components Status

Date update: 2025-07-31

| No | Component | Web | iOS | Android | | --- | ------------------------ | ------- | --- | ------- | | 1 | Announcer | ✅ 1.0+ | ✅ | | | 2 | Box | ✅ 1.0+ | | | | 3 | Breadcrumbs | ✅ 1.0+ | | | | 4 | Badge | ✅ 1.0+ | ✅ | ✅ | | 5 | Button | ✅ 1.2+ | ✅ | ✅ | | 6 | Checkbox | ✅ 1.0+ | | ✅ | | 7 | Chip | ✅ 1.2+ | ✅ | ✅ | | 8 | CurrencyInput | ✅ 1.0+ | | ✅ | | 9 | DatePicker | ✅ 1.5+ | | | | 10 | DateTimePicker | ✅ 1.5+ | | | | 11 | Dialog | ✅ 1.0+ | ✅ | | | 12 | Drawer* | ✅ 1.0+ | ✅ | ✅ | | 13 | Dropdown | ✅ 1.0+ | ✅ | | | 14 | EmptyState | ✅ 1.0+ | ✅ | ✅ | | 15 | GhostButton (ButtonLink) | ✅ 1.0+ | | | | 16 | Grid | ✅ 1.0+ | | | | 17 | LegacyDialog | ✅ 1.0+ | | | | 18 | LegacyPopup | ✅ 1.0+ | | | | 19 | MultiSearchDropdown* | ✅ 1.0+ | | ✅ | | 20 | Notification | N/A | | ✅ | | 21 | Input/ Input Text | ✅ 1.2+ | ✅ | ✅ | | 22 | InputGroup | ✅ 1.0+ | ✅ | | | 23 | Popup | ✅ 1.2+ | | ✅ | | 24 | RadioButton | ✅ 1.0+ | ✅ | ✅ | | 25 | RowItem | ✅ 1.0+ | ✅ | | | 26 | SearchInput | ✅ 1.2+ | | | | 27 | ShapeIcon | ✅ 1.0+ | | | | 28 | Slider | ✅ 1.0+ | | | | 29 | Snack | ✅ 1.0+ | ✅ | ✅ | | 30 | Stepper | | | ✅ | | 31 | Tabs | ✅ 1.2+ | ✅ | ✅ | | 32 | TagCloud | ✅ 1.0+ | ✅ | | | 33 | TextArea | ✅ 1.0+ | | ✅ | | 34 | TextLabel | ✅ 1.5+ | ✅ | ✅ | | 35 | ToggleSwitch | ✅ 1.0+ | | ✅ | | 36 | Tooltip | ✅ 1.0+ | ✅ | ✅ | | 37 | Pagination | 🧪 1.6+ | | | | 38 | InputRange | 🧪 2.1+ | | | | 39 | Searchbar | 🧪 2.1+ | | |

Legend: ✅: stable; 🧪: beta; ⚠️: deprecated; [1.0+]: since this version

* Other Naming:

• MultiSearchDropdown name in Android is Input multi selected chip
• Drawer in iOS / Android is *BottomSheet

Getting started

Refer to Overview > Getting-started document.

Verifying clad-ui components in production

Open browser Devtool (F12) and add following CSS to the :root element:

:root {
  /* Highlight clad-ui components: setting the color of element `outline`  */
  --cladebug: magenta;
  /* [Optional] Display component label: setting the label's pseudo-element `display` property  */
  --cladebug-label: block;
}

Frequently Asked Questions

1. Does this design system work with Next.js apps?

Yes. But it requires custom next.js config. Refer to Chotot Next.js Framework to see how it's configured.

Technical Debts

1. Linaria lack an object serializer that assist snapshot testing.

Currently, snapshots contains only rendered HTML and hashed class names. Ideally, snapshots should contain rendered HTML and associated CSS combined as component's signature.

Github issue to keep track

2. Dynamic theming using CSS Variables

We need to explore into implementing dynamic theme switching using CSS variables. Maybe we can look into making use of theme token as CSS variable token.

© 2020-2025 Chotot.com. Apache-2.0 license.