@umituz/atomic-next
Advanced tools
A professional atomic design system for Next.js — 15+ accessible components, full design tokens, dark mode, TypeScript-first. Built for production at scale.
📱 React Native Users: The React Native atomic design components have been moved to a dedicated template system. For React Native projects, please use the templates in the app_factory repository under
generator/tech-stack/react-native/templates/atomics/.
A comprehensive atomic design system specifically built for Web/Next.js applications with Server/Client Component separation, modern React patterns, and complete TypeScript support.
npm install @umituz/atomic-next
# or
yarn add @umituz/atomic-next
# or
pnpm add @umituz/atomic-next
{
"react": ">=18.0.0",
"react-dom": ">=18.0.0",
"next": ">=13.0.0"
}
Complete design token system with semantic naming and consistent values:
Layout & Structure
AtomicDiv - Semantic div wrapper with design system integrationAtomicCard - Content cards with header, title, description, content, footerAtomicText - Complete typography system with semantic HTMLInteractive Elements
AtomicButton - Comprehensive button system with variants and statesAtomicInput - Form inputs with validation statesAtomicCheckbox - Accessible checkbox componentAtomicSwitch - Toggle switch componentAtomicLink - Navigation links with Next.js optimizationDisplay Components
AtomicAvatar - User avatars with image and fallback supportAtomicImage - Optimized image component with variantsAtomicIcon - Icon wrapper with consistent sizingAtomicBadge - Status and count badges with variantsAtomicTag - Content tags and labelsFeedback Components
AtomicSpinner - Loading spinners (Button, Page, Inline variants)System Components
AtomicThemeProvider - Theme context and CSS custom propertiesimport {
AtomicButton,
AtomicCard,
AtomicText,
AtomicThemeProvider
} from '@umituz/atomic-next'
export default function App() {
return (
<AtomicThemeProvider>
<AtomicCard>
<AtomicText variant="h2">
Welcome to Atomic Next
</AtomicText>
<AtomicText variant="body" color="muted">
A comprehensive design system for Next.js applications.
</AtomicText>
<AtomicButton
variant="primary"
size="lg"
onClick={() => console.log('Getting started!')}
>
Get Started
</AtomicButton>
</AtomicCard>
</AtomicThemeProvider>
)
}
import { AtomicButton } from '@umituz/atomic-next'
import { Download, ArrowRight } from 'lucide-react'
export function ButtonExamples() {
return (
<div className="space-y-4">
{/* Variants */}
<AtomicButton variant="primary">Primary</AtomicButton>
<AtomicButton variant="secondary">Secondary</AtomicButton>
<AtomicButton variant="brand">Brand Gradient</AtomicButton>
<AtomicButton variant="outline">Outline</AtomicButton>
<AtomicButton variant="ghost">Ghost</AtomicButton>
{/* With Icons */}
<AtomicButton leftIcon={<Download />}>
Download
</AtomicButton>
<AtomicButton rightIcon={<ArrowRight />}>
Continue
</AtomicButton>
{/* Loading State */}
<AtomicButton loading variant="primary">
Processing...
</AtomicButton>
{/* Sizes */}
<AtomicButton size="sm">Small</AtomicButton>
<AtomicButton size="lg">Large</AtomicButton>
<AtomicButton fullWidth>Full Width</AtomicButton>
</div>
)
}
import { AtomicText } from '@umituz/atomic-next'
export function TypographyExamples() {
return (
<div className="space-y-4">
{/* Headings - Automatically render as semantic HTML */}
<AtomicText variant="h1">Main Heading</AtomicText>
<AtomicText variant="h2">Section Heading</AtomicText>
<AtomicText variant="h3">Subsection</AtomicText>
{/* Body Text */}
<AtomicText variant="lead">
This is lead text for introductions
</AtomicText>
<AtomicText variant="body">
Regular body text with proper line height
</AtomicText>
<AtomicText variant="small" color="muted">
Small muted text for captions
</AtomicText>
{/* Colors */}
<AtomicText color="primary">Primary color text</AtomicText>
<AtomicText color="success">Success message</AtomicText>
<AtomicText color="error">Error message</AtomicText>
{/* Utilities */}
<AtomicText truncate weight="semibold" align="center">
Centered, bold, truncated text
</AtomicText>
</div>
)
}
import {
AtomicCard,
AtomicCardHeader,
AtomicCardTitle,
AtomicCardDescription,
AtomicCardContent,
AtomicCardFooter,
AtomicButton,
AtomicText
} from '@umituz/atomic-next'
export function CardExample() {
return (
<AtomicCard className="w-96">
<AtomicCardHeader>
<AtomicCardTitle>Project Card</AtomicCardTitle>
<AtomicCardDescription>
A comprehensive project management solution
</AtomicCardDescription>
</AtomicCardHeader>
<AtomicCardContent>
<AtomicText variant="body">
This card demonstrates the composition pattern with
multiple atomic components working together.
</AtomicText>
</AtomicCardContent>
<AtomicCardFooter className="flex justify-between">
<AtomicButton variant="outline">Cancel</AtomicButton>
<AtomicButton variant="primary">Save</AtomicButton>
</AtomicCardFooter>
</AtomicCard>
)
}
interface AtomicButtonProps {
variant?: 'default' | 'primary' | 'brand' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link'
size?: 'default' | 'sm' | 'lg' | 'icon'
asChild?: boolean
loading?: boolean
leftIcon?: React.ReactNode
rightIcon?: React.ReactNode
fullWidth?: boolean
}
interface AtomicTextProps {
variant?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'body' | 'large' | 'small' | 'xs' | 'lead' | 'muted' | 'caption' | 'label'
color?: 'default' | 'primary' | 'secondary' | 'muted' | 'success' | 'warning' | 'error' | 'info'
align?: 'left' | 'center' | 'right' | 'justify'
weight?: 'thin' | 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold' | 'black'
as?: 'p' | 'span' | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label'
asChild?: boolean
truncate?: boolean
selectable?: boolean
}
interface AtomicCardProps {
variant?: 'default' | 'outlined' | 'elevated'
padding?: 'none' | 'sm' | 'md' | 'lg'
}
// Subcomponents: AtomicCardHeader, AtomicCardTitle, AtomicCardDescription,
// AtomicCardContent, AtomicCardFooter
The design system uses CSS custom properties for theming:
:root {
--atomic-primary: #9333EA;
--atomic-primary-dark: #7C3AED;
--atomic-secondary: #EC4899;
--atomic-accent: #F59E0B;
/* Complete color system available */
}
import { AtomicThemeProvider } from '@umituz/atomic-next'
export default function App() {
return (
<AtomicThemeProvider
theme="dark" // or "light"
customColors={{
primary: '#your-color',
secondary: '#your-color'
}}
>
{/* Your app */}
</AtomicThemeProvider>
)
}
import { AtomicButton, buttonVariants } from '@umituz/atomic-next'
import { cn } from '@umituz/atomic-next'
// Create custom variants
const customButtonVariants = {
...buttonVariants,
variant: {
...buttonVariants.variants.variant,
gradient: 'bg-gradient-to-r from-purple-500 to-pink-500'
}
}
// Or extend existing components
const CustomButton = ({ className, ...props }) => (
<AtomicButton
className={cn('custom-styles', className)}
{...props}
/>
)
All components include responsive variants and mobile-first design:
<AtomicText
variant="h1"
className="text-2xl md:text-4xl lg:text-6xl"
>
Responsive Heading
</AtomicText>
<AtomicButton
size="sm"
className="md:size-default lg:size-lg"
>
Responsive Button
</AtomicButton>
# Clone the repository
git clone https://github.com/umituz/atomic-next.git
cd atomic-next
# Install dependencies
npm install
# Start development mode
npm run dev
# Build for production
npm run build
# Run linting
npm run lint
npm run lint:fix
# Format code
npm run format
npm run format:check
# Type checking
npm run type-check
src/
├── atoms/ # Atomic components
│ ├── buttons/ # Button components
│ ├── display/ # Display components
│ ├── inputs/ # Input components
│ ├── feedback/ # Feedback components
│ ├── layout/ # Layout components
│ ├── navigation/ # Navigation components
│ └── providers/ # Context providers
├── tokens/ # Design tokens
│ ├── colors/ # Color system
│ ├── typography/ # Typography tokens
│ ├── spacing/ # Spacing scale
│ ├── shadows/ # Shadow system
│ ├── borders/ # Border utilities
│ └── animations/ # Animation presets
└── utils/ # Utility functions
# Run tests
npm test
# Run tests with coverage
npm run test:coverage
# Run tests in watch mode
npm run test:watch
Visit our documentation site for:
We welcome contributions! Please see our Contributing Guide for details.
git checkout -b feature/amazing-featurenpm testgit commit -m 'Add amazing feature'git push origin feature/amazing-featureMIT License - see the LICENSE file for details.
Ümit UZ
Made with ❤️ for the Next.js community
FAQs
A professional atomic design system for Next.js — 15+ accessible components, full design tokens, dark mode, TypeScript-first. Built for production at scale.
We found that @umituz/atomic-next demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
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.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.
Security News
The Axios compromise shows how time-dependent dependency resolution makes exposure harder to detect and contain.