tint-ui-core
v0.3.0
Published
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.
Readme
tint-ui-core
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.
Installation
npm install --save-dev `tint-ui-core`Usage
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.
Commands
init
npx tint-ui initThis command sets up the Tint UI environment, including theme configuration, component registration, and necessary dependencies.
add
npx tint-ui addDisplays a list of built-in components for selection. Selected components install necessary dependencies and links in the theme component.
create
npx tint-ui create <component-name>Creates a new component structure based on predefined templates.
Main configuration file
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"
}
}Manual Integration
Although the ThemeContextProvider component in @/components/theme is generated automatically, you need to manually integrate it into your application's App or Layout.
Integration Example
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>
);
}Note
While Tint UI is not mandatory after initial setup, it is recommended for development to ensure consistency and ease of use.
License
MIT