A React component library for building beautiful Render demos. Built with TypeScript, Tailwind CSS v4, and designed for rapid prototyping.
Install directly from GitHub using pnpm (recommended):
pnpm install github:R4ph-t/DDSOr with a specific version/tag:
pnpm install github:R4ph-t/DDS#v0.1.2
pnpm install github:R4ph-t/DDS#mainNote: pnpm is faster and more reliable than npm for GitHub packages. If you must use npm, expect longer install times.
Add the DDS styles to your project:
/* app/globals.css or similar */
@import 'render-dds/styles';The design system uses Inter (body text) and Roboto Light (headers) as free alternatives to Render's brand fonts.
For Next.js projects (recommended):
// app/layout.tsx
import { Inter, Roboto } from 'next/font/google'
const inter = Inter({
subsets: ['latin'],
variable: '--font-inter',
})
const roboto = Roboto({
weight: '300',
subsets: ['latin'],
variable: '--font-roboto',
})
export default function RootLayout({ children }) {
return (
<html lang="en" className={`${inter.variable} ${roboto.variable}`}>
<body>{children}</body>
</html>
)
}Then update your CSS:
/* app/globals.css */
@import 'render-dds/styles';
body {
font-family: var(--font-inter), 'Inter', -apple-system, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-roboto), 'Roboto', -apple-system, sans-serif;
}For other projects, add to your HTML:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Roboto:wght@300&display=swap" rel="stylesheet">Use the DDS Tailwind preset (recommended):
import ddsPreset from 'render-dds/tailwind'
/** @type {import('tailwindcss').Config} */
export default {
presets: [ddsPreset],
content: [
'./app/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
],
// Your custom config here
}Or manually (if you prefer):
export default {
content: [
'./app/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
'./node_modules/render-dds/dist/**/*.{js,ts,jsx,tsx}',
],
darkMode: 'class',
// Rest of your config
}For dark mode support, wrap your app with ThemeProvider:
// app/layout.tsx (Next.js App Router)
import { ThemeProvider, ThemeScript } from 'render-dds'
import 'render-dds/styles'
export default function RootLayout({ children }) {
return (
<html lang="en" suppressHydrationWarning>
<head>
<ThemeScript />
</head>
<body>
<ThemeProvider defaultTheme="light" enableSystem>
{children}
</ThemeProvider>
</body>
</html>
)
}Note:
- Background and text colors are applied automatically from the DDS theme
- Add
<ThemeScript />in the<head>to prevent flash of unstyled content (FOUC). This script MUST be in the<head>to run before React hydrates.
import { Button, Alert, Footer, RenderLogo, ThemeToggle } from 'render-dds'
export default function MyDemo() {
return (
<div>
<nav className="flex justify-between p-4">
<RenderLogo variant="full" height={32} />
<ThemeToggle />
</nav>
<Alert variant="info">
Welcome to Render!
</Alert>
<Button variant="default">
Deploy Now
</Button>
</div>
)
}For rich text content, use the MDXContent component:
import { MDXContent } from 'render-dds'
export default function BlogPost() {
return (
<MDXContent>
<h1>My Blog Post</h1>
<p>This content is beautifully styled with <code>@tailwindcss/typography</code>.</p>
<ul>
<li>Automatic heading styles</li>
<li>Beautiful links and code blocks</li>
<li>Dark mode support</li>
</ul>
</MDXContent>
)
}Note: The @tailwindcss/typography plugin is included in the preset.
- Button - Primary, secondary, destructive, outline variants + action buttons
- ButtonGroup - Group related buttons together with connected borders
- Link - Accessible links with external link detection
- Alert - Info, warning, error, success, help variants
- Input - Text input with label
- Label - Form labels
- FormField - Combined label + input + error message
- CodeBlock - Syntax-highlighted code with Shiki
- CodeEditor - Interactive code editor with CodeMirror
- Toast - Notifications (success, error, info)
- Spinner - Loading spinners for async operations
- Tabs - Tab navigation
- Collapsible - Expandable sections
- StatCard - Display statistics
- ProgressBar - Progress indicators with cost tracking
- MetricCard - Collapsible metric cards
- ResultsPanel - Validation results display
- RenderLogo - Render branding (mark or full logo)
- GridDecoration - Decorative 90x90px grid background pattern
- ThemeToggle - Dark/light mode toggle button
- Container - Layout container with variants (bordered, elevated, ghost)
- Card - Content card with header, content, footer sections
- Icon - Ionicons 5 icons
- Footer - Page footer with links and copyright (supports centered layout and sticky positioning)
- Navigation - Navigation bar with customizable links position and active states
- HeroMinimal - Minimal hero section
- EditorLayout - Full-page editor layout
- MDXContent - Rich text container with typography styles
- ThemeProvider - Context provider for dark/light mode management
Pre-configured buttons for common actions:
SaveButton, DeployButton, DeleteButton, EditButton, CreateButton, UploadButton, DownloadButton, and more.
- Square corners - No border-radius
- 1px borders - Clean, minimal borders
- Solid colors - No gradients
- Clean & minimal - Focus on content
- Render's palette - Purple/violet primary colors
- Dark mode support - Built-in dark mode (requires Tailwind v4
@variant dark)
npm run ladleVisit http://localhost:61000 to browse all components.
npm run buildnpm run type-checkrender-dds is fully tree-shakeable. Only import what you need:
// ✅ Only Button code is included
import { Button } from 'render-dds'
// ✅ Multiple components
import { Button, Alert, Footer } from 'render-dds'Tailwind CSS will also only include the styles for components you actually use.
Full TypeScript support with exported types:
import type { ButtonProps, AlertProps } from 'render-dds'Use the component generator to scaffold a new component with its story file:
# Create a UI component (Button, Alert, Card, etc.)
npm run create:component ComponentName
# Create a block component (Hero, Footer, Navigation, etc.)
npm run create:component ComponentName blocksExamples:
npm run create:component Card
# Creates:
# - src/components/ui/card.tsx
# - stories/ui/card.stories.tsx
npm run create:component Hero blocks
# Creates:
# - src/components/blocks/hero.tsx
# - stories/blocks/hero.stories.tsxAfter creating a component:
- Add your component logic to the
.tsxfile - Update the story with examples
- Export the component from
src/index.ts:export { Card } from "./components/ui/card" export type { CardProps } from "./components/ui/card"
- Run
npm run ladleto preview
Use the automated release scripts:
# For bug fixes (0.1.2 → 0.1.3)
npm run release:patch
# For new features (0.1.2 → 0.2.0)
npm run release:minor
# For breaking changes (0.1.2 → 1.0.0)
npm run release:majorEach command will:
- Build the package
- Bump the version in
package.json - Create a git commit with the version
- Create a git tag (e.g.,
v0.1.3) - Push to GitHub with tags
If you prefer manual control:
# Make your changes
npm run build
# Commit changes
git add -A
git commit -m "Your changes"
# Create version tag
git tag v0.1.x
git push && git push --tagsMIT