cambrian-ds
v2.2.6
Published
Cambrian Design System
Readme
cambrian-ds
Manual Installation
Prefer automatic setup? Use our CLI tool:
npx cambrian-ds-cli init- See cambrian-ds-cli
Installation
npm install cambrian-ds @heroui/react @heroui/theme framer-motion next-themes clsx tailwind-variantsAdditional Dependencies
For Vite:
npm install -D tailwindcss @tailwindcss/viteFor Next.js:
npm install -D tailwindcss @tailwindcss/postcssSetup
1. Configure Tailwind CSS
Vite Configuration
vite.config.ts:
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
plugins: [react(), tailwindcss()],
resolve: {
dedupe: ['react', 'react-dom'] // Important for local development
}
})tailwind.config.ts:
import { heroui } from "@heroui/theme";
import { cambrianTheme } from "cambrian-ds";
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
"./node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}",
"./node_modules/@heroui/system/dist/**/*.{js,ts,jsx,tsx}",
"./node_modules/@heroui/react/dist/**/*.{js,ts,jsx,tsx}",
"./node_modules/cambrian-ds/dist/**/*.{js,jsx}"
],
theme: {
extend: cambrianTheme.extend,
},
plugins: [heroui(cambrianTheme.heroui)],
}src/index.css:
@import "cambrian-ds/fonts.css";
@import "tailwindcss";
@config "../tailwind.config.ts";
body {
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}src/main.tsx:
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { CambrianProvider } from 'cambrian-ds'
import App from './App.tsx'
import './index.css'
createRoot(document.getElementById('root')!).render(
<StrictMode>
<CambrianProvider>
<App />
</CambrianProvider>
</StrictMode>,
)Next.js Configuration
tailwind.config.ts:
import { heroui } from "@heroui/theme";
import { cambrianTheme } from "cambrian-ds";
export default {
content: [
"./app/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}",
"./node_modules/@heroui/system/dist/**/*.{js,ts,jsx,tsx}",
"./node_modules/@heroui/react/dist/**/*.{js,ts,jsx,tsx}",
"./node_modules/cambrian-ds/dist/**/*.{js,jsx}"
],
theme: {
extend: cambrianTheme.extend,
},
plugins: [heroui(cambrianTheme.heroui)],
}app/globals.css:
@import "cambrian-ds/fonts.css";
@import "tailwindcss";
@config "../tailwind.config.ts";
body {
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}app/layout.tsx:
import type { Metadata } from "next";
import "./globals.css";
import { CambrianProvider } from "cambrian-ds";
export const metadata: Metadata = {
title: "My App",
description: "Built with Cambrian DS",
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en" suppressHydrationWarning>
<body className="antialiased">
<CambrianProvider>{children}</CambrianProvider>
</body>
</html>
);
}2. Start Using Components
import { Button, Card, CardBody, CardHeader, Input } from 'cambrian-ds'
function App() {
return (
<Card>
<CardHeader>
<h2>Welcome to Cambrian</h2>
</CardHeader>
<CardBody>
<Input label="Email" placeholder="Enter your email" />
<Button variant="primary">Submit</Button>
</CardBody>
</Card>
)
}Components
50+ components available. See COMPONENTS.md for detailed documentation with examples.
Forms & Inputs
Button, Input, NumberInput, Textarea, Select, Checkbox, CheckboxGroup, Radio, RadioGroup, Switch, Slider, DatePicker, TimeInput
Layout & Structure
Card, CardHeader, CardBody, CardFooter, Divider, Spacer, Header, Accordion, ScrollShadow
Data Display
Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, Code, Badge, Chip, Avatar, User, Image, Kbd
Navigation
Breadcrumb, BreadcrumbItem, Tabs, Tab, Pagination, Link, Listbox, ListboxItem
Overlays
Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Dialog, DialogContent, DialogHeader, DialogBody, DialogFooter, Popover, PopoverTrigger, PopoverContent, Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, DropdownSection, Tooltip
Feedback
Alert, Toast, Progress, Spinner, Skeleton
Hooks
useTheme
import { useTheme } from 'cambrian-ds'
function ThemeToggle() {
const { theme, setTheme } = useTheme()
return (
<button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
Toggle Theme
</button>
)
}useDisclosure
import { useDisclosure, Modal, ModalContent } from 'cambrian-ds'
function Example() {
const { isOpen, onOpen, onClose } = useDisclosure()
return (
<>
<button onClick={onOpen}>Open Modal</button>
<Modal isOpen={isOpen} onClose={onClose}>
<ModalContent>Modal content</ModalContent>
</Modal>
</>
)
}useThemeSafe (Next.js)
Server-safe theme hook for Next.js to prevent hydration mismatches:
import { useThemeSafe } from 'cambrian-ds/next'
function ThemeToggle() {
const { theme, setTheme } = useThemeSafe()
// Safe to use in Next.js server components
}Theme Configuration
The package exports cambrianTheme which includes:
import { cambrianTheme } from 'cambrian-ds'
// Use in Tailwind config
export default {
theme: {
extend: cambrianTheme.extend,
},
plugins: [heroui(cambrianTheme.heroui)],
}TypeScript
All components are fully typed:
import type { ButtonProps, CardProps, InputProps } from 'cambrian-ds'
const CustomButton = (props: ButtonProps) => {
return <Button {...props} />
}Dark Mode
Dark mode is built-in and uses next-themes under the hood. The CambrianProvider automatically configures theme switching:
import { CambrianProvider, useTheme } from 'cambrian-ds'
function App() {
return (
<CambrianProvider>
<YourApp />
</CambrianProvider>
)
}Font Loading
The package includes Figtree font. Import the CSS file in your global styles:
@import "cambrian-ds/fonts.css";Exports
Main Export
import { Button, Card, useTheme } from 'cambrian-ds'Tailwind Plugin (Legacy)
import { cambrianPlugin } from 'cambrian-ds/tailwind'Next.js Utilities
import { useThemeSafe } from 'cambrian-ds/next'Font CSS
@import "cambrian-ds/fonts.css";Requirements
- React 18+
- React DOM 18+
- Tailwind CSS 4+
Peer Dependencies
{
"react": ">=18.0.0",
"react-dom": ">=18.0.0"
}License
MIT © Edgar Priday