t4-ui
v10.0.0
Published
🟦A generous, hyper-dimensional, framework-agnostic, parametric, UI-component library.
Downloads
2
Readme
- TailwindCSS-first class names.
- Unique customization schema with style-focused proper-named templates.
- Compile-time & run-time template literal parser for targeting any framework. (it's just STL & pure functions😆)
- Clear and clean customizations.
- Generic types & definition functors provided through Blakprint
- Multiple packge types and sizes.
- Multiple CDN access.
npm i t4-[package]-[specific | agnosic]
typescript
- choose a package
npm i t4-basic-ts
or
- some components you need
npm i t4-navbar-ts t4-footer-ts t4-button-ts
- import and configure your components.
import { Navbar as T4NavBar } from "t4-navbar-ts";
import { Footer as T4Footer } from "t4-footer-ts";
import { Button as T4Button } from "t4-button-ts";
const themeSx: T4StylizerProps = {
bg: "black",
fg: "white",
text: themeSx.fg,
fx: {
glassmorphism: {
strength: "md"
}
},
on: {
hover: {
color: "white",
bg: "black",
duration: "0.5s",
},
click: {
outline: {
color: "white",
size: "2px",
duration: "0.5s ease-in-out"
}
}
}
}
}
export const NavBar = T4NavBar({ target: "react", template: "blake", sx: themeSx })
export const Button = T4Button({ target: "react", template: "blake", sx: themeSx })
export const Footer = T4Footer({ target: "react", template: "blake", sx: themeSx })
export const Page = props => {
return (
<>
<NavBar {...props?.navBar}/>
<Button {...props?.buton}/>
<Footer {...props?.footer}/>
</>
)
}
dependencies
- htm
- [vite]
- [framer-motion]
- [tailwindCSS]
Platforms
- Framework Specific
- [React]
- [Qwik]
- Framework Agnostic
- T4-Intermidary Format --> Custom Parser Target.
Options
- core
- tiny
- full
- fancy
(load:docs/AUTHORS.md) (load:docs/ACKNOWLEDGEMENTS.md) (load:docs/ISSUES.md)
©️ 2023 Désirable Solutions. All Rights Reserved.
This project is under the GPL-3.0-version license. ☂️