- .git
- .github
- ◌ .next
- ◌ dist
- ◌ node_modules
-
app
-
components
-
ui
- Accordion.tsx
- Button.tsx
- Dialog.tsx
- Popover.tsx
- Tabs.tsx
- Tooltip.tsx
- Button.tsx
-
ui
- favicon.ico
- globals.css
- layout.tsx
- page.tsx
-
components
-
public
- logo-256x256.png
- logo-128x128.png
- logo-64x64.png
- logo-16x16.png
- logo.svg
- next.config.ts
- tsconfig.json
Terminal UIs for the Web
WebTUI is a modular CSS library that brings the beauty of Terminal UIs to the browser
1 | <button variant-="foreground0"> |
2 | Click |
3 | </button> |
4 | |
5 | <label> |
6 | <input type="checkbox" is-="switch" /> |
7 | Hello there |
8 | </label> |
9 | |
10 | <span is-="badge" variant-="yellow"> |
11 | Warning |
12 | </span> |
Semantic Approach
HTML tags and attributes determine the behavior and appearance of different components
The dash at the end of each attribute name (-
), makes WebTUI compatible with frameworks like React
1 | @import "@webtui/css/base.css"; |
2 | |
3 | /* Utils */ |
4 | @import "@webtui/css/utils/box.css"; |
5 | |
6 | /* Components */ |
7 | @import "@webtui/css/components/typography.css"; |
8 | @import "@webtui/css/components/button.css"; |
9 | @import "@webtui/css/components/badge.css"; |
10 |
Pure, Modular CSS
WebTUI is built with Pure CSS and does not require any JavaScript
Import and use only what you need
Easily Themable
0/4Install beautiful pre-built color themes or create your own
1 | <style> |
2 | @import "@webtui/theme-catppuccin"; |
3 | </style> |
4 | |
5 | <html data-webtui-theme="catppuccin-mocha"></html> |
1 | <style> |
2 | @import "@webtui/theme-catppuccin"; |
3 | </style> |
4 | |
5 | <html data-webtui-theme="catppuccin-latte"></html> |
1 | <style> |
2 | @import "@webtui/theme-nord"; |
3 | </style> |
4 | |
5 | <html data-webtui-theme="nord"></html> |
1 | <style> |
2 | @import "@webtui/theme-gruvbox"; |
3 | </style> |
4 | |
5 | <html data-webtui-theme="gruvbox-dark-hard"></html> |
1 | <style> |
2 | @import "@webtui/theme-gruvbox"; |
3 | </style> |
4 | |
5 | <html data-webtui-theme="gruvbox-light-hard"></html> |
Can anyone point me to some code to determine if a number in JavaScript is even or odd?
Gallery
0/2Awesome projects built with WebTUI

https://stefvuck.dev

https://example.com

https://localhost:3000

https://example.com
WebTUI can be supported via Github Sponsors
Thanks to all our generous supporters, including: