npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@zenius-one/ursa

v0.5.0

Published

Ursa core components library: inputs, buttons, overlays etc.

Downloads

2

Readme

Ursa

npm version npm downloads

Ursa is a themeable, but opinionated component library designed for the Zenius One ecosystem to create the best experience for users who use Zenius One products.


Installation

# With yarn
yarn add @zenius-one/ursa

# With npm
npm install @zenius-one/ursa

Usage

Wrap your main App component with the ThemeProvider component.

  • In Next.js this is usually at pages/_app.tsx.
  • In Create-React-App this is usually at src/index.ts.
  • Equivalent for other React frameworks.

Example: Usage in Next.js. This is the default behaviour where it switches from light to dark themes as the preferred color-scheme changes.

import { ThemeProvider } from '@zenius-one/ursa';

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ThemeProvider>
      <Component {...pageProps} />
    </ThemeProvider>
  );
}
export default MyApp;

Themes

ThemeProvider ships with the Ursa lightTheme and the darkTheme. These are the only two officially supported themes at the moment. You can change themes programmatically or not, by providing the ThemeProvider component the theme prop.

Example: Overriding theme in Next.js. This will apply darkTheme for all times.

import { ThemeProvider } from '@zenius-one/ursa';
import { darkTheme } from '@zenius-one/ursa/dist/esm/styles/darkTheme';

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ThemeProvider theme={darkTheme}>
      <Component {...pageProps} />
    </ThemeProvider>
  );
}
export default MyApp;

By default, Ursa will auto detect the preferred color scheme of the Operating System and switch to a light or dark color scheme accordingly.


Custom Themes

Ursa can allow the developers on the Zenius platform using Ursa, to set their own custom themes for both light and dark modes (or any other theme switch logic they would like to use).

As mentioned earlier, Ursa will auto detect the preferrer color scheme of the Operating System and do the switches. However, you can turn this behaviour off by adding the { detect: false } option to themeOptions and providing your own theme. Ursa ships with a useColorScheme React hook that detects the preferred color scheme.

Example: Using your custom themes that switch based on preferred color scheme.

import { customLightTheme, customDarkTheme } from '.path/to/themes';
import { useColorScheme } from '@zenius-one/ursa';

function MyApp({ Component, pageProps }: AppProps) {
  const currentScheme = useColorScheme();
  const selectedScheme =
    currentScheme === 'dark' ? customDarkTheme : customLightTheme;

  return (
    <ThemeProvider theme={selectedScheme} themeOptions={{ detect: false }}>
      <Component {...pageProps} />
    </ThemeProvider>
  );
}

export default MyApp;

Note:

  • Ursa allows custom themes. However, this means using the theme variables already defined by the Ursa style system. Currently, only custom colors are supported. (Documentation has to be expanded on this)
  • This is a pre-alpha release. Custom themes and the manner of their implementation may be subject to change.

License

See LICENSE.md