Installation
Get started with Artic-UI in your React project. Follow these steps to set up your development environment.
Beta Release
This library is currently in beta. Only a subset of components is available on npm. However, you can still use other components by copying their code directly from our documentation. We're actively working on publishing all components.
Prerequisites
- Node.js 16.8 or later
- React 18 or later (including React 19)
- Next.js 13 or later (for Next.js projects)
- Tailwind CSS 3.0 or later (including Tailwind v4)
Package Manager
Installation
Install Artic-UI and its peer dependencies:
npm install artic-ui framer-motion @tailwindcss/typographyFramework Setup
Follow these steps to set up Artic-UI with Next.js and Tailwind CSS v4:
1. Install Tailwind CSS
Install Tailwind CSS and its PostCSS plugin:
npm install tailwindcss @tailwindcss/postcss postcss2. Configure PostCSS
Create a postcss.config.mjs file in the root of your project:
const config = {
plugins: {
"@tailwindcss/postcss": {},
},
};
export default config;3. Import Tailwind CSS
Add an import to your globals.css file:
/* Import Tailwind CSS */
@import "tailwindcss";
/* Your custom styles below */4. Configure Tailwind
Create or update your tailwind.config.js file to include Artic-UI components:
// tailwind.config.js
module.exports = {
content: [
'./app/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
'./node_modules/artic-ui/**/*.{js,ts,jsx,tsx}',
],
plugins: [
require('@tailwindcss/typography'),
],
}Usage
Import and use Artic-UI components in your React application:
import { Button, Alert } from 'artic-ui'
export default function App() {
return (
<div className="space-y-4">
<Alert
variant="success"
message="Operation completed successfully!"
/>
<Button variant="gradient">
Click me
</Button>
</div>
)
}