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

secptrum-ui

v1.1.65

Published

**SecptrumUI** A comprehensive React component library

Downloads

3,388

Readme

SecptrumUI A comprehensive React component library

Table of Contents

Features

  • 🎨 Customizable: Easily customize components using styled-chroma for advanced styling.
  • 🧩 Modular: Import only the components you need, reducing bundle size.
  • 💻 Responsive: All components are designed to be fully responsive.
  • Fast Development: Speed up your development process with pre-built, easy-to-integrate components.
  • 🔍 Accessible: Built with accessibility best practices in mind.

Installation

Prerequisites

Before installing SecptrumUI, ensure you have:

  • React >= 18.0.0
  • ReactDOM >= 18.0.0

installed in your project.

Install SecptrumUI

To install SecptrumUI, you can use npm or yarn:

# Using npm
npm install secptrum-ui

# Using yarn
yarn add secptrum-ui

Usage

To use SecptrumUI components in your project, import the components you need

import { Button, Input, Stack, Box } from 'secptrum-ui';

function App() {
  return (
     <Stack spacing="md">
      <Box padding="md" border="1px solid #ddd">
        <Input placeholder="Enter your text here" />
      </Box>
      <Button size='lg' radius='lg' variant="solid">
        Click Me
      </Button>
    </Stack>
  );
}

Components

SecptrumUI includes a variety of components to help you build your application

  • Button: A versatile button component with multiple styles and sizes.
  • Card: A flexible card component for displaying content.
  • Modal: A modal dialog for alerts, confirmations, or custom content.
  • Toast: Notifications and messages to provide feedback to users.
  • Input: Customizable input fields with validation support.
  • Tabs: A tabs component for navigation or selection options.
  • Stack: A layout component for arranging child elements with spacing.
  • Box: A versatile container component for layout and styling purposes.
  • ImagePicker: A picker components that allows users to select and upload an image.

Button

  • Button: A customizable button component designed to handle various actions and events in your application. The Button component supports multiple variants, sizes, and states, making it versatile and adaptable to different design and functionality needs.

Input

  • Input: A versatile input field component that supports different types, styles, and additional features like icons. The Input component is designed to be highly customizable, making it suitable for various use cases such as forms, search bars, and user data entry.

Stack

  • Stack: A layout component that arranges its children in a vertical or horizontal stack with configurable spacing. The Stack component simplifies the management of child components' spacing, alignment,

Box

  • Box: A flexible container component that serves as a building block for layout and styling. The Box component allows you to easily control spacing (padding and margin), alignment, borders, and other CSS properties through props.

Tabs

  • Tabs: A tabs component that allows users to switch between different views or sections of content. The Tabs component provides a clean and intuitive interface for navigating between different parts of an application.

For a full list of components and their usage, please refer to the documentation.

CLI Tool

SecptrumUI includes a CLI tool to help set up your Next.js project with SecptrumUI.

Note: This setup is specific to Next.js and provides detailed instructions for configuration.

Setup

  1. Install SecptrumUI

First, ensure you have Secptrum UI installed in your project. If not, you can install it using npm or yarn:

npm install secptrum-ui
  1. Initialize SecptrumUI

To initialize SecptrumUI next configuration in your Next.js project, run the following command:

npx secptrum-ui init

This will create a SecptrumUIRegistry component in your project and add it to your lib/registry.js or lib/registry.tsx file.

  1. Import SecptrumUIRegistry into your root layout

Finally, import the SecptrumUIRegistry component in your layout.js or layout.tsx file:

  • app/layout for App Router

  • src/layout for Pages Router

  • TypeScript

import SecptrumUIRegistry from '@/lib/registry';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        <SecptrumUIRegistry>{children}</SecptrumUIRegistry>
      </body>
    </html>
  );
}
  • JavaScript
import SecptrumUIRegistry from '@/lib/registry';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <SecptrumUIRegistry>{children}</SecptrumUIRegistry>
      </body>
    </html>
  );
}

These steps ensure that SecptrumUI components are properly registered and available throughout your application.

Note: When using styled to customize components, you need to add the 'use client' directive at the top of the file. Don't worry about style glitches; SecptrumUI will handle those for you.

Coutomization

SecptrumUI leverages styled, a css-in-js method, to provide a flexible way to customize components.

Example

import { Button, styled } from 'secptrum-ui';

// Customizing the Button component

const CustomButton = styled(Button)`
    background-color: #007bff;
    color: white;
    padding: 12px 24px;
`;

function App() {
  return (
    <CustomButton>
      Customized Button
    </CustomButton>
  );
}

export default App;

Note: You can use your favorite styling library to customize components, such as TailwindCSS, styled-components, etc., or even plain CSS.

Contributing

Contributions are welcome to improve SecptrumUI! Please see our CONTRIBUTING.md for guidelines on how to submit improvements and bug fixes.