neural-ui
v1.0.22
Published
A modern UI component library built with React and Tailwind CSS
Maintainers
iulik1kkkReadme
Neural UI
A modern UI component library built with React and Tailwind CSS.
Installation
npm install neural-uiThe package will automatically set up the necessary files in your project, including:
- Component files
- Utility functions
- Font configuration
- Required dependencies
Font Configuration
To use the Inter font with Neural UI, you need to configure it in your Next.js application:
- In your
app/layout.tsxor equivalent:
import { Inter } from "next/font/google";
import { createFontConfig } from "neural-ui";
const inter = Inter({
subsets: ["latin"],
display: "swap",
variable: "--font-inter",
});
// Create the font configuration
const fontConfig = createFontConfig(inter);
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en" className={fontConfig.className}>
<body>{children}</body>
</html>
);
}- Add the font variable to your Tailwind CSS configuration:
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
sans: ["var(--font-inter)"],
},
},
},
};Usage
import { Button, Input, Checkbox, Alert } from "neural-ui"
// Button with variants
<Button variant="default">Click me</Button>
<Button variant="destructive">Delete</Button>
// Input with variants
<Input placeholder="Enter your name" />
<Input variant="error" placeholder="Error state" />
// Checkbox
<Checkbox />
// Alert with variants
<Alert variant="success">
<AlertTitle>Success!</AlertTitle>
<AlertDescription>
Your changes have been saved.
</AlertDescription>
</Alert>Components
Button
- Variants: default, destructive, outline, ghost, link
- Sizes: default, sm, lg
Input
- Variants: default, error
- Sizes: default, sm, lg
Checkbox
- Accessible checkbox component
- Custom styling with Tailwind CSS
Alert
- Variants: default, destructive, success, warning, info
- Includes AlertTitle and AlertDescription subcomponents
Development
# Install dependencies
npm install
# Start development server
npm run dev
# Build package
npm run buildLicense
MIT