- .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-vitesse"; |
| 3 | </style> |
| 4 | |
| 5 | <html data-webtui-theme="vitesse-dark-soft"></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: