import { Alert, Code, Tabs, Terminal } from "../../dist/index.js"; import SiteLayout from "./SiteLayout.jsx"; const installCode = "npm i @anephenix/ui --save"; const appRouterCode = `// app/layout.jsx import '@anephenix/ui/dist/index.css'; export default function RootLayout({ children }) { return ( {children} ); }`; const viteCode = `// src/main.jsx import React from 'react'; import ReactDOM from 'react-dom/client'; import '@anephenix/ui/dist/index.css'; import App from './App'; ReactDOM.createRoot(document.getElementById('root')).render( , );`; const pagesRouterCode = `// pages/_app.jsx import '@anephenix/ui/dist/index.css'; export default function App({ Component, pageProps }) { return ; }`; const firstComponentCode = `import { Button, Alert } from '@anephenix/ui'; function MyPage() { return (

@anephenix/ui is installed and ready to use.

); }`; const pageLayoutCode = `import { Page, NavBar, Footer } from '@anephenix/ui'; export default function RootLayout({ children }) { return ( My App} links={[]} loggedIn={false} />

{children}

© 2026 My Company} rightSection={Privacy} /> ); }`; const tokenOverrideCode = `/* In your own global CSS, after the @anephenix/ui import */ :root { /* Swap the primary brand colour */ --primary-colour: #e11d48; /* Use indigo instead of blue for links and focus rings */ --blue-one-colour: #6366f1; --blue-two-colour: #a5b4fc; /* Nudge the base font size up */ --font-size-base: 15px; }`; export default function GetStartedPage() { const frameworkTabs = [ { id: "app-router", label: "Next.js App Router", content: (


			),
		},
		{
			id: "vite",
			label: "Vite / React",
			content: ,
		},
		{
			id: "pages-router",
			label: "Next.js Pages Router",
			content: (
				
			),
		},
	];

	return (
		
			
				Get started
				
					@anephenix/ui is a React component library with a plain-CSS design
					system. This guide takes you from installation to your first working
					page in a few minutes.
				

				{/* ── 1. Install ── */}
				
					1. Install
					
				

				{/* ── 2. Requirements ── */}
				
					2. Requirements
					
						
							
								Dependency
								Version
								Notes
							
						
						
							
								Node.js
								24+
								Required for the build tooling
							
							
								React
								19+
								Peer dependency — install separately
							
						
					
				

				{/* ── 3. Import the stylesheet ── */}
				
					3. Import the stylesheet
					
						All component styles and design tokens live in a single CSS file.
						Import it once at the root of your app — the exact location depends
						on your framework.
					
					
					
						Do not import the stylesheet more than once. A single root-level
						import covers your entire app.
					
				

				{/* ── 4. Your first component ── */}
				
					4. Your first component
					
						All components are named exports from @anephenix/ui.
						Import only what you need — the library is tree-shakeable.
					
					
				


				{/* ── 5. Structuring a page ── */}
				
					5. Structuring a page
					
						Use the layout components to scaffold a full page. Page{" "}
						provides the outer shell, NavBar and{" "}
						Footer sit at full width, and a{" "}
						.container.withSidePadding div constrains the main
						content to the grid column.
					
					
				


				{/* ── 6. Customising design tokens ── */}
				
					6. Customising design tokens
					
						Every colour, font size, weight, and spacing value is a CSS custom
						property on :root. Override any of them in your own
						global stylesheet — after the @anephenix/ui import —
						and every component that consumes that token will update
						automatically.
					
					
					
						See the Colours,{" "}
						Typography, and{" "}
						Grid pages for the full list of available
						tokens.
					
				


				{/* ── 7. Next steps ── */}
				
					7. Next steps
					
						
							Browse all components — forms,
							layout, display, overlays, and more
						
						
							Colours — the full colour palette and
							how it maps to component variants
						
						
							Grid — spacing scale and responsive
							breakpoints
						
						
							Typography — type scale, font
							families, and heading rules
						
						
							Layout — page, container, and padding
							utilities
						
					
				
			

		
	);
}