Security News
Meet Socket at Black Hat Europe and BSides London 2025
Socket is heading to London! Stop by our booth or schedule a meeting to see what we've been working on.
By Anders Søndergaard - Nov 11, 2025
@tabnews/ui
Advanced tools
@tabnews/ui
A React component library for tabnews.com.br.
Installation
To install the package, use:
npm i @tabnews/ui
Configure Next.js
In your next.config.js, add @primer/react and @tabnews/ui to transpilePackages:
// next.config.js
module.exports = {
transpilePackages: ['@primer/react', '@tabnews/ui'],
};
Theme Setup
To configure theming, first import the global CSS file in your main application file:
// app/layout.js (App Router) or pages/_app.js (Pages Router)
import '@tabnews/ui/css';
The library provides two properties for theme control:
colorMode: Sets a fixed theme, such as "dark" or "light", preventing automatic switching.defaultColorMode: Enables automatic switching based on the user’s preference (light/dark mode).
The usage of these properties depends on which Next.js router you are using:
App Router
In the App Router, wrap your app with PrimerRoot. This component creates the base structure for the <html>, so it also accepts the lang attribute. You can use either defaultColorMode (for automatic switching) or colorMode (for a fixed theme):
// app/layout.js
import { PrimerRoot } from '@tabnews/ui';
import '@tabnews/ui/css';
export default function Layout({ children }) {
return (
<PrimerRoot
lang="en"
defaultColorMode="dark" // Enables theme switching
// colorMode="dark" // Uses a fixed theme
>
{children}
</PrimerRoot>
);
}
Pages Router
In Pages Router, you must add _document.js to ensure proper theme setup:
// pages/_document.js
export { Document as default } from '@tabnews/ui/document';
In _app.js, you can use either AutoThemeProvider or ThemeProvider:
- If you want to use theme switching, wrap your app with
AutoThemeProviderand pass thedefaultColorModeproperty:
// pages/_app.js
import { AutoThemeProvider } from '@tabnews/ui';
import '@tabnews/ui/css';
export default function NextApp({ Component, pageProps }) {
return (
<AutoThemeProvider defaultColorMode="dark">
<Component {...pageProps} />
</AutoThemeProvider>
);
}
- If you want to use a fixed theme, wrap your app with
ThemeProviderand pass thecolorModeproperty:
// pages/_app.js
import { ThemeProvider } from '@tabnews/ui';
import '@tabnews/ui/css';
export default function NextApp({ Component, pageProps }) {
return (
<ThemeProvider colorMode="dark">
<Component {...pageProps} />
</ThemeProvider>
);
}
Note: Although
AutoThemeProvidersupports setting a fixed theme usingcolorMode, it is recommended to useThemeProviderinstead when a fixed theme is required. This ensures that the theme is applied immediately.
Configure Vitest
In vitest.config.js, set test.server.deps.inline to true:
// vitest.config.js
test.server.deps.inline: true
Examples
See examples in the examples directory.
FAQs
TabNews UI
The npm package @tabnews/ui receives a total of 80 weekly downloads. As such, @tabnews/ui popularity was classified as not popular.
We found that @tabnews/ui demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Package last updated on 21 Apr 2025
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Security News
OWASP 2025 Top 10 Adds Software Supply Chain Failures, Ranked Top Community Concern
OWASP’s 2025 Top 10 introduces Software Supply Chain Failures as a new category, reflecting rising concern over dependency and build system risks.
By Sarah Gooding - Nov 08, 2025
Research
/Security News
9 Malicious NuGet Packages Deliver Time-Delayed Destructive Payloads
Socket researchers discovered nine malicious NuGet packages that use time-delayed payloads to crash applications and corrupt industrial control systems.
By Kush Pandya - Nov 06, 2025