v1.4-beta · zero deps

Write less code.
Build with style.

24 UI components in pure HTML, CSS and JavaScript. No frameworks, no bundlers, no «npm install 500mb».

View demos GitHub →
⬡ 24 components ⬡ Zero deps ⬡ MIT License ⬡ Mobile‑first

Components in action

Live demo: all components work right here

Dashboard / Project overview

live
Revenue
$24,345
▲ 12.5%
Visitors
2,345
▲ 8.3%
Conversion
3.2%
▼ 1.8%
Session
4m 32s
▲ 10.3%
+12 new beta
Project status
Mobile AppAt Risk
MarketingOn Track
Web RedesignOn Track
Product LaunchDelayed

TechOne UI

All components live in a single .js file. Plug it in and you're done.

Component preview

24 components, zero config

From buttons to dialogs — everything out of the box

◆

Button & IconButton

Buttons with variants, icon buttons, disabled and loading states.

button icon-button
◇

Card, Grid, Flex

Content cards, grids and flex containers for any layout.

card grid flex
▦

Accordion & Dropdown

Collapsible panels and dropdown menus with animations.

accordion dropdown
◈

Dialog & Tooltip

Modal windows and tooltips on hover.

dialog tooltip
▣

Badge, Tag, Banner

Labels, tags and info banners with variants.

badge tag banner
◉

Progress, Spinner, Skeleton

Progress bars, spinners and skeleton loaders.

progress spinner skeleton
◉

Table, Timeline

Data tables and vertical timelines.

table timeline
◐

Avatar, Pulse, Status

Avatars, status indicators and pulse animation.

avatar pulse status
◈

Toggle, Breadcrumbs

Toggle groups and navigation breadcrumbs.

toggle breadcrumbs
◈

Utilities

Inline SVG icons and scroll-to-top button.

icon scroll-top

Playground

Try it yourself — everything is interactive

Accordion

UI components framework. Zero deps. One .js file, that's it.
24. And each one works.

Dropdown

Toggle Group

Badge · Tag · Pulse

stable alpha #ui #opensource

Progress

Progress
Completed

Table

NameStatusRole
AliceactiveDev
BobawayDesign
CarolactivePM

and 18 more: Button, Card, Banner, Breadcrumbs, Dialog, Flex, Grid, Icon, IconButton, Skeleton, Spinner, StatusIndicator, Timeline, Tooltip, Avatar, ScrollTop, Pulse, Banner

Quick start

One .js file and you're in the game

git clone https://github.com/ll1ness/techone-ui.git
cd techone-ui
python3 -m http.server 8080
<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>My App</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <button class="to-button" data-variant="primary">Click me</button>
  <script src="build/techon-ui.min.js"></script>
</body>
</html>