v1.0.0 Preview
Design System v1.0

Build faster.
Stay consistent.

The complete design system for building modern web applications — every color, token, component, pattern, and template documented and ready to implement.

Get Started Browse Components AI Guide
20+
Components
10
Foundations
8
Patterns
5
Templates
Installation
View on npm ↗
npm
@syhrezz/ui
npmjs.com/package/@syhrezz/ui
npm install @syhrezz/ui
/* In your main CSS or JS entry file */ import '@syhrezz/ui/tokens.css'; import '@syhrezz/ui/components.css'; /* optional — only if you need the sidebar + topbar shell */ import '@syhrezz/ui/shell.css';
Or import everything at once: import '@syhrezz/ui'
yarn add @syhrezz/ui
/* In your main CSS or JS entry file */ import '@syhrezz/ui/tokens.css'; import '@syhrezz/ui/components.css'; import '@syhrezz/ui/shell.css'; /* optional */
pnpm add @syhrezz/ui
/* In your main CSS or JS entry file */ import '@syhrezz/ui/tokens.css'; import '@syhrezz/ui/components.css'; import '@syhrezz/ui/shell.css'; /* optional */
No build tool? Link directly from a CDN in your HTML <head>.
<!-- Design tokens --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@syhrezz/ui/tokens.css"/> <!-- Component classes --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@syhrezz/ui/components.css"/> <!-- Optional: app shell layout --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@syhrezz/ui/shell.css"/>
npm install @syhrezz/ui
// src/main.tsx import '@syhrezz/ui/tokens.css'; import '@syhrezz/ui/components.css'; import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; ReactDOM.createRoot(document.getElementById('root')!).render( <React.StrictMode><App /></React.StrictMode> );
// Use classes directly in JSX export function Button() { return ( <button className="btn btn-primary"> Save Changes </button> ); }
npm install @syhrezz/ui
// app/layout.tsx (App Router) import '@syhrezz/ui/tokens.css'; import '@syhrezz/ui/components.css'; export default function RootLayout({ children }: { children: React.ReactNode }) { return ( <html lang="en"> <body>{children}</body> </html> ); }
What's included
tokens.css
CSS custom properties — colors, spacing, radius, shadows, motion, z-index
components.css
Component utility classes — badge, table, callout, anatomy, changelog, do/dont
shell.css optional
App shell layout — sidebar, topbar, nav links, main content area
index.css
Convenience file — imports all three in the correct order
Quick Start
1
Install the package
Run npm install @syhrezz/ui and import the CSS files into your project entry point.
2
Use Components
Copy HTML snippets from component pages. Each page has React + HTML examples with copy buttons.
3
Follow Patterns
Use the Patterns section for common UI flows — CRUD tables, forms, dashboards, and more.
Design Principles
Consistent
Same patterns everywhere. Users learn once, apply everywhere across all roles and pages.
Efficient
Dense information layouts. Optimised for power users who need data fast, not casual browsing.
Clear
Hierarchy through size and weight. Dark sidebar, white content, light surface backgrounds.
Scalable
Role-based accent colors, collapsible sidebar, responsive layouts — built for enterprise scale.
Accessible
WCAG AA contrast ratios. Keyboard navigable. Focus rings. Screen reader semantics.
Developer First
Every component has HTML, React, and AI implementation specs. No ambiguity, no guessing.
Patterns
View all
Templates
View all