The main package for generating and installing dependencies for the tint-ui-core library. It is intended for development use and is recommended for developers working with Tint UI.
Tint UI uses Tailwind CSS for styling and Radix UI for some interactive components.
npm install --save-dev `tint-ui-core`Tint UI provides three basic commands:
-
init: Initializes thetint-uisetup in your project, generating necessary configuration files and installing dependencies. -
add: Adds a new component or feature to your project. -
create: Creates a new project or component structure based on templates.
npx tint-ui initThis command sets up the Tint UI environment, including theme configuration, component registration, and necessary dependencies.
npx tint-ui addDisplays a list of built-in components for selection. Selected components install necessary dependencies and links in the theme component.
npx tint-ui create <component-name>Creates a new component structure based on predefined templates.
File: components.json
This file is automatically generated with the tint-ui init command. However, if initialization fails or you need to configure everything manually, you can create the file yourself. You will also need to configure tsconfig.json for component references like @/components or another alias, and set up basic configurations in the Tailwind config and global.css.
{
"mode": "sass",
"ts": true,
"tailwind": {
"config": "tailwind.config.ts",
"css": "app/globals.css",
"baseColor": "blue",
"cssVariables": true,
"prefix": ""
},
"path": {
"app": "app/layout.tsx"
},
"aliases": {
"components": "@/components"
}
}Although the ThemeContextProvider component in @/components/theme is generated automatically, you need to manually integrate it into your application's App or Layout.
For Next.js applications, add the provider to your root layout:
import type { Metadata } from "next";
import type { ReactNode } from "react";
import { ThemeContextProvider } from "@/components/theme";
import { getGlobalState } from "@/lib/some-function";
import "./globals.css";
export const metadata: Metadata = {
title: "Next App",
};
export default async function Layout({ children }: Readonly<{ children: ReactNode }>) {
const state = await getGlobalState();
const options = {
state,
language: "en",
lexicon: {},
};
return (
<html>
<body>
<ThemeContextProvider options={options}>{children}</ThemeContextProvider>
</body>
</html>
);
}While Tint UI is not mandatory after initial setup, it is recommended for development to ensure consistency and ease of use.
MIT