Skip to main content
Version: 1.0


OsmiCSX provide custom hooks to make styling more easier inside functional component.


import { useStyles } from "osmicsx";

export const Button = () => {
const { apply } = useStyles();

return (
style={apply("py-2 px-5 rounded-lg bg-blue-500")}
<Text style={apply("text-sm font-semibold text-white")}>Click Me</Text>

Return Type

apply(...args: string[]) => anyreturn an object styles or string (if only apply color-name)
switchTheme(mode: keyof typeof ThemeMode) => voidmode can be dark, light, or system
scaleWidth(width: number) => numberreturn width in number depends on screen resolution
scaleHeight(height: number) => numberreturn height in number depends on screen resolution