@atechagency/ui-kit

Lightweight, accessible, and fully themeable React UI component library. Built from scratch for Atech Agency products. No Material UI or third-party UI dependencies.

npm install @atechagency/ui-kit yarn add @atechagency/ui-kit

🚀 Installation

⚠️ Peer Dependencies

This UI kit requires Emotion for styling and theming. Please ensure the following packages are installed in your project:

• @emotion/react
• @emotion/styled
• @emotion/css

You can install them with:

npm install @emotion/react @emotion/styled @emotion/css
# or
yarn add @emotion/react @emotion/styled @emotion/css

Install the UI kit package via npm:

npm install @atechagency/ui-kit

Or with Yarn:

yarn add @atechagency/ui-kit

✨ Features

• Themeable: Centralized theme system using Emotion. Easily override colors, spacing, typography, and more.
• Accessibility: 100% a11y compliance. All components are keyboard navigable and screen-reader friendly.
• Lightweight: No runtime CSS-in-JS bloat. Tree-shakable and minimal bundle size.
• TypeScript: Fully typed public API for great DX.
• Composable: Build complex UIs from simple, reusable primitives.

🔧 Usage

Wrap your app with the ThemeProvider to enable theming and access theme values in your components:

import React from "react"
import { ThemeProvider, useTheme, Button } from "@atechagency/ui-kit"

function Example() {
  const { theme } = useTheme()
  return (
    <div
      style={{ background: theme.colors.background, padding: theme.spacing.md }}
    >
      <Button variant="primary" size="md">
        Click Me
      </Button>
    </div>
  )
}

export default function App() {
  return (
    <ThemeProvider>
      <Example />
    </ThemeProvider>
  )
}

Theming & Customization

• Override theme values by passing a custom theme to ThemeProvider.
• Pass className or css props for further customization.
• All components are accessible and support keyboard navigation and ARIA attributes.

📚 Storybook

Browse all components, variations, and documentation using Storybook.

npm run storybook Then open http://localhost:6006

Local Development:

npm run storybook

Then open http://localhost:6006

Hosted Storybook coming soon!

🛠️ Development Clone and develop locally:

git clone https://github.com/AAgecy/atechlibrary.git cd ui-kit npm install npm run storybook Build the package:

npm run build This will output the compiled files to dist/.

npm login npm version patch # or minor / major npm publish --access public

📦 Publishing Before publishing, ensure you are logged in to npm and on the correct version:

npm login
npm version patch # or minor / major
npm publish --access public

📁 File Structure

ui-kit/
├── src/
│   ├── components/
│   ├── theme/
│   ├── provider/
│   └── index.ts
├── .storybook/
├── dist/
└── package.json

📋 Components Here are some included components (more coming soon):

• ✅ Button
• ✅ TextField
• ✅ Checkbox
• ✅ Typography
• ✅ Card
• ✅ ThemeProvider + useTheme

All components are designed to be customizable, theme-aware, and accessible.

📌 Roadmap Publish to npm

Host Storybook on Vercel

Add more component variations (forms, layouts, navigation)

Create theme customizer tool

Add Tailwind-compatible version (optional)

🧪 Testing Components This UI kit uses interactive Storybook docs for testing prop variations. More test integration (e.g. React Testing Library) planned soon.

🤝 Contributing Pull requests, ideas, and improvements are welcome!

Setup for Contributors: npm install npm run storybook Create a new component in src/components/, and add a .stories.tsx file to document it.

👥 Maintainers Sujav Acharya — Lead Developer at Atech Agency

📝 License MIT © Atech Agency (https://atechagency.com.au)

🔗 Links

• Storybook Docs
• Atech Agency