@youngonesworks/ui

v1.0.26

Published

3 days ago

A Youngones UI component library

0High
0Medium
0Low

markhesselberthyo

jeremypercyyo

joasihe

react components ui tailwind

@youngonesworks/ui

A comprehensive React component library built with Tailwind CSS v4, featuring modular CSS variables and TypeScript support.

Features

🧩 React components built with TypeScript
🎨 Styled with Tailwind CSS v4
📦 Modular CSS exports - Import only what you need
🔤 Font-agnostic design – Works seamlessly with app-level fonts (e.g. Work Sans via Google Fonts)
🎯 CSS Variables & Utilities - Exportable design tokens
🌳 Tree-shakeable - Only import what you need
📝 Full TypeScript support - Type-safe CSS variable helpers
⚡ Modern build - Rolldown (Rust-based bundler)

Installation

# pnpm
pnpm add @youngonesworks/ui

# npm
npm install @youngonesworks/ui

Peer Dependencies

react: ^18 || ^19
react-dom: ^18 || ^19
next: ^14 || ^15 (for Next.js projects)

Tailwind CSS v4 setup (required for component styles)

Component classes (e.g. KebabMenu title, buttons, layout) are Tailwind utilities. Your app must scan the library’s built output so Tailwind generates those classes.

1. Import the library CSS in your main stylesheet (e.g. app.css or globals.css):

@import "tailwindcss";
@import "@youngonesworks/ui/styles.css";

2. Add the library to Tailwind’s source so utilities used by components are generated. In the same main CSS file, add:

@source "../node_modules/@youngonesworks/ui/dist";

Use the path that resolves to the library from your CSS file (e.g. ../../node_modules/... if your CSS lives under src/).

Example full setup:

/* app.css or src/globals.css */
@import "tailwindcss";
@source "../node_modules/@youngonesworks/ui/dist";
@import "@youngonesworks/ui/globals.css";

Without @source, components like KebabMenu (e.g. the visible title and dropdown styles) will not get their Tailwind styles in the built CSS.

Tailwind CSS v3 (legacy)

If you still use Tailwind v3 with tailwind.config.js, include the library in content:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./node_modules/@youngonesworks/ui/dist/**/*.{js,jsx,ts,tsx}",
  ],
  theme: { extend: {} },
  plugins: [],
};

Note: use the dist folder, because that is what gets published and where the class names appear.

Usage

🧩 React Components

import { Button } from "@youngonesworks/ui";

function App() {
  return (
    <>
      <Button>Default</Button>
      <Button variant="secondary" size="sm">
        Small Secondary
      </Button>
      <Button variant="outline" size="lg">
        Large Outline
      </Button>
    </>
  );
}

🎨 CSS Variables & Utilities

Import CSS Variables

/* Import in your CSS file */
@import "@youngonesworks/ui/styles/variables.css";
@import "@youngonesworks/ui/styles/utilities.css";

.my-component {
  color: var(--color-primary); /* #10d1bb */
  font-family: var(--font-family-sans); /* App-defined sans font */
  font-size: var(--font-lg-size); /* 1.125rem */
  transition: var(--transition-duration-sidebar);
}

🔤 Next.js Fonts

Setup in Next.js App Router

// app/layout.tsx
// app/layout.tsx
import { Work_Sans } from "next/font/google";
import "@youngonesworks/ui/styles/variables.css";

const workSans = Work_Sans({
  subsets: ["latin"],
  weight: ["300", "400", "500", "600", "700", "900"],
  variable: "--font-family-sans",
});

export default function RootLayout({ children }) {
  return (
    <html lang="en" className={workSans.variable}>
      <body>{children}</body>
    </html>
  );
}

Use Font Utilities

// app/layout.tsx
import { Work_Sans } from "next/font/google";
import "@youngonesworks/ui/styles/variables.css";

const workSans = Work_Sans({
  subsets: ["latin"],
  weight: ["300", "400", "500", "600", "700", "900"],
  variable: "--font-family-sans",
});

export default function RootLayout({ children }) {
  return (
    <html lang="en" className={workSans.variable}>
      <body>{children}</body>
    </html>
  );
}

📦 Available Exports

// Components
import { Button, Card, Input } from "@youngonesworks/ui";

// CSS files (import in CSS/SCSS)
// @import '@youngonesworks/ui/styles/variables.css';
// @import '@youngonesworks/ui/styles/utilities.css';

📊 Available CSS Variables

Colors

--color-primary - Primary brand color (#10d1bb)
--color-secondary - Secondary brand color
--color-background - Background colors
--color-foreground - Text colors

Typography

--font-family-sans - Application-defined sans font stack (e.g. Work Sans)
--font-xs-size to --font-9xl-size - Font sizes (0.75rem - 8rem)
--font-xs-line to --font-9xl-line - Line heights

Spacing & Sizing

--spacing-* - Consistent spacing scale
--sizing-* - Width/height utilities

Transitions & Animations

--transition-duration-* - Duration presets
Custom animation utilities (.animate-spin-slow, etc.)

Components

Button

<Button
  variant="primary" // 'primary' | 'secondary' | 'outline'
  size="md" // 'sm' | 'md' | 'lg'
  onClick={() => console.log("clicked")}
>
  Click me
</Button>

🚀 Development

Setup

git clone https://github.com/youngonesworks/ui.git
cd ui
pnpm install

Available Scripts

# Development
pnpm dev          # Start Storybook development server
pnpm watch        # Watch and build library

# Building
pnpm build        # Build library for production
pnpm build-storybook  # Build Storybook for deployment

# Publishing
pnpm buildAndPublish  # Build and publish to npm

# Code Quality
pnpm lint         # ESLint
pnpm lint:fix     # Auto-fix ESLint issues
pnpm format       # Prettier formatting
pnpm test         # Run Jest tests

Project Structure

src/
├── components/     # React components
├── styles/         # Modular CSS files
    ├── variables.css   # CSS custom properties
    ├── utilities.css   # Utility classes
    └── fonts.css       # Font-face declarations
├── theme/          # TypeScript theme utilities
    ├── variables.ts    # CSS variable helpers
    ├── fonts.ts        # Next.js font configuration
    └── index.ts        # Theme exports
└── index.ts        # Main entry point

Contributing

Contributions are welcome! Please follow these guidelines:

Fork the repository and create a feature branch
Follow conventional commits spec for commit messages
Add tests for new components or utilities
Update documentation including README and Storybook stories
Ensure all checks pass (lint, format, test, build)
Submit a PR with a clear description

CSS Variables

When adding new CSS variables:

Add them to src/styles/variables.css
Document them in this README

License

ISC License - see LICENSE file for details.

Built with ❤️ by YoungOnes | Website | GitHub

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@youngonesworks/ui

Features

Installation

Peer Dependencies

Tailwind CSS v4 setup (required for component styles)

Tailwind CSS v3 (legacy)

Usage

🧩 React Components

🎨 CSS Variables & Utilities

Import CSS Variables

🔤 Next.js Fonts

Setup in Next.js App Router

Use Font Utilities

📦 Available Exports

📊 Available CSS Variables

Colors

Typography

Spacing & Sizing

Transitions & Animations

Components

Button

🚀 Development

Setup

Available Scripts

Project Structure

Contributing

CSS Variables

License