UI Kit — Apex JS components

Actions

Button <Button/> Primary button; edit classes for secondary/outline/ghost.

Forms

Name

TextInput <TextInput/> Labeled text input with focus/disabled states.

Comment

Textarea <Textarea/> Labeled textarea with focus/disabled states.

Operating System

Select <Select/> Native select with floating label + chevron.

Notifications

Checkbox <Checkbox/> Checkbox with label and animated check.

Option

Radio <Radio/> Radio button with slotted label.

Toggle

Toggle <Toggle/> Accessible on/off switch with animated knob.

Mood Meter

Range <Range/> Styled range slider with themed thumb.

Upload File

FileInput <FileInput/> Native file upload with styled button + label.

Rating <Rating/> Interactive 5-star radio rating.

Make

Combobox <Combobox/> Searchable single-select with keyboard nav.

Items(s)

Counter <Counter/> Numeric stepper with min/max clamping.

Overlays

Modal <Modal/> Dialog with focus-trap, esc/click-outside close.

Dropdown <Dropdown/> Menu with keyboard nav + click-outside close.

Accordion panel content

Accordion <Accordion/> Collapsible item with title + body slots.

Tooltip <Tooltip/> Hover/focus tooltip; content via slot.

Navigation

Navbar <Navbar/> Responsive top nav with mobile hamburger menu.

Sidebar <Sidebar/> Responsive off-canvas sidebar with nav links.

Breadcrumbs <Breadcrumbs/> Chevron-separated breadcrumb navigation.

Pagination <Pagination/> Numbered pagination with prev/next.

completed
2
3
4

Steps <Steps/> Horizontal step progress indicator.

Groups tab content

Likes tab content

Comments tab content

Saved tab content

Tabs <Tabs/> Tablist with arrow-key focus + panel slots.

Read if bored

Link <Link/> Styled inline anchor with slotted label.

Feedback

Alert

Alert <Alert/> Dismissible info alert with icon, message slot, and close button.

Banner

Banner <Banner/> Full-width dismissible top banner with a text slot.

Toast <Toast/> Stacking toast notifications with auto-dismiss.

Badge

Badge <Badge/> A small status/label pill.

Loading

Spinner <Spinner/> SVG loading spinner (motion-safe).

Progress <Progress/> Progress bar with ARIA value bindings.

Skeleton <Skeleton/> Pulsing placeholder skeleton loader.

Data & media

CustomerID	Name	Email	Membership
2335	Alice Brown	alice.brown@gmail.com	Silver
2338	Bob Johnson	johnson.bob@outlook.com	Gold
2342	Sarah Adams	s.adams@gmail.com	Gold

Table <Table/> Bordered data table with header + rows.

Card

Card <Card/> A surface container that inherits the theme.

JS

Avatar <Avatar/> Circular initials avatar; content via slot.

Ctrl

Kbd <Kbd/> Keyboard key indicator; key label via slot.

Penguin UI

ChatBubble

ChatBubble <ChatBubble/> Received/sent chat message bubbles; text via slot.

Carousel <Carousel/> Slide carousel with prev/next + dot indicators.