-
-
Notifications
You must be signed in to change notification settings - Fork 0
Component Categories
Lasha Kandelaki edited this page May 1, 2026
·
2 revisions
A short guide to picking the right category when you publish a component to the CTkMaker Hub. Each section lists what fits, what doesn't, and a few concrete examples.
If your component genuinely overlaps two categories, pick the one that best describes its primary purpose — the thing a user would search for if they wanted to find it.
Use for
- Standalone buttons with custom styling (colors, gradients, borders)
- Icon-only or icon+text button variants
- Toggle button packs (on/off, multi-state)
- Action button groups (toolbar segments, paired primary/secondary)
- Specialty buttons (loading spinners, ripple effects)
Don't use for
- Buttons that only exist inside a larger form → Forms
- A whole panel of unrelated buttons → Layout or Navigation
Examples
- "Neon glow" accent button with hover animation
- Three-state segmented toggle
- Floating action button with shadow
Use for
- Custom-styled Entry / ComboBox / Checkbox / RadioButton / Slider
- Inputs with extended behaviour (masked entry, currency formatter, email validator)
- Tag inputs, multi-select dropdowns
- Date / time / color / file pickers (single-purpose)
Don't use for
- Multiple inputs combined into a working form → Forms
- Inputs presented inside a modal prompt → Dialogs & Modals
Examples
- Currency entry that auto-formats on blur
- Hex color picker with live preview
- Tag input with autocomplete suggestions
Use for
- Login / signup screens
- Contact and feedback forms
- Settings / preferences forms (the form itself, not the whole window shell)
- Multi-step wizards
- Survey forms
Don't use for
- A single styled input → Inputs
- A full application window that wraps a form (with branding, nav, etc.) → Templates & Starters
Examples
- "Email + password + remember me" login card
- 3-step onboarding wizard
- Account settings form (name, email, avatar)
Use for
- Reusable container patterns (responsive grid, flex row/column)
- Splitters and resizable panes
- Scrollable areas with custom scrollbar styling
- Tile / masonry layouts
- Spacer / divider primitives
Don't use for
- Visual containers with specific content (info cards, profile cards) → Cards & Panels
- Layouts that include navigation chrome (sidebar, header) → Navigation
Examples
- 2-pane resizable splitter
- Responsive 3-column grid that collapses on narrow widths
- Custom scrollable frame with rounded thumb
Use for
- Sidebars (collapsible, multi-level, icon mode)
- Top bars and app headers
- Tab strips and tabbed interfaces
- Breadcrumbs
- Menu drawers / hamburger menus
Don't use for
- A single styled button used for navigation → Buttons
- Full app shells that bundle navigation and content area → Templates & Starters
Examples
- Collapsible sidebar with icon-only collapsed state
- Top bar with logo + search + avatar
- Animated tab strip with sliding underline
Use for
- Alert / confirm / prompt dialogs
- Custom-styled file picker / save dialogs
- Settings popups
- Modal versions of forms (login modal, payment modal)
- Full-screen modals with overlay
Don't use for
- Inline (non-modal) forms → Forms
- Toast / notification banners → Cards & Panels
Examples
- "Confirm delete" modal with icon and red action button
- Custom file picker with preview pane
- Full-screen settings modal with tabbed sections
Use for
- Information cards (profile, product, article)
- Stat tiles / KPI cards
- Collapsible / expandable panels
- Notification banners and toasts
- Hero / feature cards
Don't use for
- Cards used as form containers → Forms
- Layout primitives without specific content → Layout
Examples
- Profile card with avatar, name, role, action button
- Stat tile with number, label, trend arrow
- Notification toast with icon and dismiss button
Use for
- Self-contained small applications with their own state and logic
- Utility apps (unit converter, JSON formatter, color converter)
- Educational / demo apps
- Productivity micro-apps
Don't use for
- Empty starter projects without functionality → Templates & Starters
- Single-screen tools that are mostly form fields → Forms
Examples
- Todo list with add / edit / delete and local persistence
- Pomodoro timer with start / pause / reset and history
- Music player UI with playlist sidebar and progress bar
Use for
- Empty app skeletons ready to be filled with custom logic
- Sidebar + content shells without specific content
- Tab-based shells
- Splash + main shell combos
- Boilerplate windows with menu bar, status bar, and main area
Don't use for
- Working apps with real functionality → Mini-Apps
- A bare layout with no navigation chrome → Layout
Examples
- Sidebar + content shell with empty pages
- Tab-based dashboard shell with 3 placeholder tabs
- Splash screen + main window combo
Use for
- Anything that genuinely doesn't fit the categories above
- Experimental components (animations, particle effects, custom canvas)
- Niche utilities (tooltip variants, keyboard shortcut hints)
- Onboarding overlays, tour guides
Don't use for
- Components that fit any other category — pick that one instead
Examples
- Tour guide overlay with arrow pointers
- Animated background canvas
- Floating tooltip with markdown rendering
Pick the category whose Examples section is closest to what you've built. If two categories feel equally right, choose the more specific one — Other is a fallback, not a default.