vedanta-ui-config
v0.1.0
Published
Shared theming and UI config for Next.js apps (Tailwind v4 + Ant Design v5)
Readme
vedanta-ui-config
Shared theming and UI configuration for Next.js apps using Tailwind CSS v4 and Ant Design v5.
Install
npm install vedanta-ui-configPeer deps (ensure these exist in your app): react, react-dom, antd, tailwindcss.
What’s included
- Tailwind v4 preset:
vedanta-ui-config/tailwind.config - Antd theme tokens:
antdTheme - Global CSS variables + base styles:
vedanta-ui-config/styles/global.css - Reusable component:
PrimaryButton
Quick start
- Import global CSS once (e.g., in your app root):
// src/app/globals.css
@import "tailwindcss";
@import "vedanta-ui-config/styles/global.css";
@theme inline {
--color-primary: rgb(var(--vc-color-primary));
}- Use the Tailwind preset
// tailwind.config.js (or .ts)
import shared from "vedanta-ui-config/tailwind.config";
export default {
presets: [shared],
// ...your overrides
};- Apply Ant Design theme via ConfigProvider
import { ConfigProvider } from "antd";
import { antdTheme } from "vedanta-ui-config";
export default function App({ children }) {
return (
<ConfigProvider theme={antdTheme}>
{children}
</ConfigProvider>
);
}- Use the shared PrimaryButton
import { PrimaryButton } from "vedanta-ui-config";
export function Example() {
return <PrimaryButton>Click me</PrimaryButton>;
}Theming notes
- Colors are defined as RGB channels in CSS variables (e.g.,
--vc-color-primary) to support alpha:rgb(var(--vc-color-primary) / 0.6). - Dark mode: set
data-theme="dark"on<html>or<body>to switch variables. Default is light. - Tailwind utilities map to these variables; Antd uses matching literal tokens.
Extending
- Override variables in your app’s CSS (e.g., per brand) by setting new values under a selector:
[data-theme="brandA"] {
--vc-color-primary: 220 38 38; /* red */
}- Extend Tailwind in your local config as usual; the preset just seeds defaults.
Build & publish
This package ships TypeScript sources compiled to dist/ on publish.
npm run build
npm publish --access public