Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
57 lines (54 loc) · 31.7 KB
/
Copy pathindex.html
File metadata and controls
57 lines (54 loc) · 31.7 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<script>
// Resolve the theme before CSS and the prerendered page can paint.
(() => {
let stored = null;
try { stored = window.localStorage.getItem("theme"); } catch {}
const dark = stored === "dark" || (stored !== "light" && window.matchMedia("(prefers-color-scheme: dark)").matches);
document.documentElement.classList.toggle("dark", dark);
document.documentElement.classList.toggle("light", !dark);
document.documentElement.dataset.mode = dark ? "dark" : "light";
})();
</script>
<title>Basalt — React UI components & dashboard templates</title>
<link rel="canonical" href="https://basaltui.com/" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon.png" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<meta name="description" content="Build with Basalt: an open-source React UI library with matte components, charts, and dashboard templates. TypeScript, light and dark themes, MIT licensed." />
<meta name="author" content="Basalt" />
<meta name="robots" content="index, follow, max-image-preview:large" />
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#edeff2" />
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#171717" />
<link rel="alternate" type="text/plain" title="llms.txt" href="https://basaltui.com/llms.txt" />
<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=DM+Sans:opsz,wght@9..40,500;9..40,600;9..40,700&display=swap" rel="stylesheet" />
<meta property="og:title" content="Basalt — React UI components & dashboard templates" />
<meta property="og:description" content="Build with Basalt: an open-source React UI library with matte components, charts, and dashboard templates. TypeScript, light and dark themes, MIT licensed." />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Basalt" />
<meta property="og:locale" content="en_US" />
<meta property="og:url" content="https://basaltui.com/" />
<meta property="og:image" content="https://basaltui.com/opengraph-image.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="basalt. Hanbaiyu marble Forbidden City corner tower on a pale engineering field." />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Basalt — React UI components & dashboard templates" />
<meta name="twitter:description" content="Build with Basalt: an open-source React UI library with matte components, charts, and dashboard templates. TypeScript, light and dark themes, MIT licensed." />
<meta name="twitter:image" content="https://basaltui.com/opengraph-image.png" />
<meta name="twitter:image:alt" content="basalt. Hanbaiyu marble Forbidden City corner tower on a pale engineering field." />
<script type="application/ld+json">{"@context":"https://schema.org","@graph":[{"@type":"WebSite","@id":"https://basaltui.com/#website","url":"https://basaltui.com/","name":"Basalt","alternateName":"basalt.","description":"Build with Basalt: an open-source React UI library with matte components, charts, and dashboard templates. TypeScript, light and dark themes, MIT licensed.","inLanguage":"en","publisher":{"@id":"https://basaltui.com/#org"}},{"@type":"Organization","@id":"https://basaltui.com/#org","name":"Basalt","url":"https://basaltui.com/","sameAs":["https://github.com/nocoo/basalt","https://www.npmjs.com/package/@nocoo/basalt","https://hexly.ai/"]},{"@type":"SoftwareApplication","@id":"https://basaltui.com/#software","name":"Basalt","alternateName":"@nocoo/basalt","applicationCategory":"DeveloperApplication","operatingSystem":"Web","url":"https://basaltui.com/","downloadUrl":"https://www.npmjs.com/package/@nocoo/basalt","codeRepository":"https://github.com/nocoo/basalt","image":"https://basaltui.com/opengraph-image.png","publisher":{"@id":"https://basaltui.com/#org"},"offers":{"@type":"Offer","price":"0","priceCurrency":"USD"},"isAccessibleForFree":true,"description":"Build with Basalt: an open-source React UI library with matte components, charts, and dashboard templates. TypeScript, light and dark themes, MIT licensed.","license":"https://github.com/nocoo/basalt/blob/main/LICENSE"},{"@type":"WebPage","@id":"https://basaltui.com/#webpage","url":"https://basaltui.com/","name":"Basalt — React UI components & dashboard templates","description":"Build with Basalt: an open-source React UI library with matte components, charts, and dashboard templates. TypeScript, light and dark themes, MIT licensed.","isPartOf":{"@id":"https://basaltui.com/#website"},"about":{"@id":"https://basaltui.com/#software"},"inLanguage":"en"}]}</script>
<link rel="stylesheet" href="/src/index.css" />
</head>
<body>
<div id="root"><!--seo:body--><link rel="preload" as="image" imageSrcSet="/logo-128.png 1x, /logo-256.png 2x"/><div id="top" class="landing" data-landing-page="true" tabindex="-1"><a class="landing-skip-link" href="#main-content">Skip to main content</a><header class="landing-header"><div class="landing-header-inner"><a href="/" class="landing-brand" aria-label="Basalt home"><img src="/logo-128.png" srcSet="/logo-128.png 1x, /logo-256.png 2x" width="24" height="24" alt="" class="landing-logo"/><span>basalt.</span></a><nav aria-label="Main navigation" class="landing-nav"><a href="/ui">Components</a><a href="#templates">Templates</a><a href="#get-started">Get started</a></nav><div class="landing-header-actions"><a class="basalt-ui relative inline-flex cursor-pointer items-center justify-center gap-basalt-control-gap rounded-basalt-md font-medium wrap-anywhere transition-colors basalt-motion before:absolute before:-inset-basalt-border-width outline-hidden focus-visible:ring-2 focus-visible:ring-basalt-ring focus-visible:ring-offset-2 focus-visible:ring-offset-basalt-background disabled:pointer-events-none disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 basalt-choice hover:bg-basalt-hover hover:text-basalt-accent-foreground basalt-action basalt-action-icon shrink-0 landing-github [&_svg]:size-[1.125rem]" href="https://github.com/nocoo/basalt" target="_blank" rel="noopener noreferrer" aria-label="GitHub repository" data-state="closed"><span class="sr-only">GitHub repository</span><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-github" aria-hidden="true"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"></path><path d="M9 18c-4.51 2-5-2-7-2"></path></svg></a><a class="basalt-ui relative inline-flex cursor-pointer items-center justify-center gap-basalt-control-gap rounded-basalt-md font-medium wrap-anywhere transition-colors basalt-motion before:absolute before:-inset-basalt-border-width outline-hidden focus-visible:ring-2 focus-visible:ring-basalt-ring focus-visible:ring-offset-2 focus-visible:ring-offset-basalt-background disabled:pointer-events-none disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 basalt-choice hover:bg-basalt-hover hover:text-basalt-accent-foreground basalt-action basalt-action-icon shrink-0 landing-github [&_svg]:size-[1.125rem]" href="https://hexly.ai/projects/basalt" target="_blank" rel="noopener noreferrer" aria-label="Basalt on hexly.ai (opens in a new tab)" data-state="closed"><span class="sr-only">Basalt on hexly.ai</span><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 2 8.66 5v10L12 22l-8.66-5V7Z"></path><path d="M12 2v20M3.34 7l17.32 10m0-10L3.34 17"></path></svg></a></div></div></header><main id="main-content" class="landing-main" tabindex="-1"><section class="landing-hero" aria-labelledby="landing-title"><div class="landing-container"><div class="landing-hero-copy"><p class="landing-eyebrow"><span class="landing-status-dot"></span>The matte React design system</p><h1 id="landing-title"><span>A calmer canvas</span> <span>for complex software.</span></h1><p class="landing-lede">Thoughtful components and complete dashboard layouts. Build information-rich products with a little less noise, and a lot more clarity.</p><div class="landing-hero-actions"><a href="/ui" class="landing-button landing-button-primary">Browse components<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></a><a href="#templates" class="landing-button landing-button-secondary">Explore templates<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right" aria-hidden="true"><path d="M7 7h10v10"></path><path d="M7 17 17 7"></path></svg></a></div><p class="landing-hero-note"><span>React 19</span><span>TypeScript</span><span>Open source · MIT</span></p></div><figure class="landing-preview"><a href="/dashboard" class="landing-preview-link" aria-label="Explore the live analytics dashboard"><picture><source media="(prefers-color-scheme: dark)" srcSet="/landing/dashboard-dark-1200.webp 1200w, /landing/dashboard-dark.webp 3200w" sizes="(min-width: 1600px) 1456px, 91vw"/><img src="/landing/dashboard-light.webp" srcSet="/landing/dashboard-light-1200.webp 1200w, /landing/dashboard-light.webp 3200w" sizes="(min-width: 1600px) 1456px, 91vw" alt="Basalt analytics dashboard with a navigation sidebar, financial metrics, bar charts, and an expense breakdown" width="3200" height="2000" loading="eager" fetchPriority="high" decoding="async"/></picture></a><figcaption><span><span class="landing-status-dot"></span> Real components. A working starting point.</span><a href="/dashboard">Open dashboard<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right" aria-hidden="true"><path d="M7 7h10v10"></path><path d="M7 17 17 7"></path></svg></a></figcaption></figure></div></section><div class="landing-container"><nav class="landing-stats" aria-label="Inside the library"><a href="/ui"><strong>93</strong><span>Components<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right" aria-hidden="true"><path d="M7 7h10v10"></path><path d="M7 17 17 7"></path></svg></span></a><a href="/ui?category=chart"><strong>25</strong><span>Charts<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right" aria-hidden="true"><path d="M7 7h10v10"></path><path d="M7 17 17 7"></path></svg></span></a><a href="/ui?category=block"><strong>3</strong><span>Blocks<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right" aria-hidden="true"><path d="M7 7h10v10"></path><path d="M7 17 17 7"></path></svg></span></a><a href="https://github.com/nocoo/basalt/blob/main/LICENSE" target="_blank" rel="noopener noreferrer"><strong>MIT</strong><span>Yours to build with<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right" aria-hidden="true"><path d="M7 7h10v10"></path><path d="M7 17 17 7"></path></svg></span></a></nav><section id="templates" class="landing-section" aria-labelledby="templates-title"><div class="landing-section-heading"><div><p class="landing-eyebrow">The starting points</p><h2 id="templates-title">Skip the blank canvas.<br/>Keep the possibilities.</h2></div><p>Working layouts for the work that matters. Explore the details, borrow the patterns, and make them your own.</p></div><div class="landing-template-grid"><article class="landing-template"><a href="/dashboard" class="landing-template-link"><div class="landing-template-image"><picture><source media="(prefers-color-scheme: dark)" srcSet="/landing/dashboard-dark-1200.webp 1200w, /landing/dashboard-dark.webp 3200w" sizes="(max-width: 760px) 90vw, 30vw"/><img src="/landing/dashboard-light.webp" srcSet="/landing/dashboard-light-1200.webp 1200w, /landing/dashboard-light.webp 3200w" sizes="(max-width: 760px) 90vw, 30vw" alt="Analytics overview template preview" width="3200" height="2000" loading="lazy" decoding="async"/></picture></div><div class="landing-template-copy"><p class="landing-eyebrow">Dashboard</p><h3>Analytics overview<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right" aria-hidden="true"><path d="M7 7h10v10"></path><path d="M7 17 17 7"></path></svg></h3><p>Metrics, trends, and the bigger picture. All in one place.</p><span class="landing-text-link">Explore template<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></span></div></a></article><article class="landing-template"><a href="/banking" class="landing-template-link"><div class="landing-template-image"><picture><source media="(prefers-color-scheme: dark)" srcSet="/landing/banking-dark-1200.webp 1200w, /landing/banking-dark.webp 3200w" sizes="(max-width: 760px) 90vw, 30vw"/><img src="/landing/banking-light.webp" srcSet="/landing/banking-light-1200.webp 1200w, /landing/banking-light.webp 3200w" sizes="(max-width: 760px) 90vw, 30vw" alt="Banking & wealth template preview" width="3200" height="2000" loading="lazy" decoding="async"/></picture></div><div class="landing-template-copy"><p class="landing-eyebrow">Finance</p><h3>Banking & wealth<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right" aria-hidden="true"><path d="M7 7h10v10"></path><path d="M7 17 17 7"></path></svg></h3><p>A considered home for balances, portfolios, and transactions.</p><span class="landing-text-link">Explore template<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></span></div></a></article><article class="landing-template"><a href="/network" class="landing-template-link"><div class="landing-template-image"><picture><source media="(prefers-color-scheme: dark)" srcSet="/landing/network-dark-1200.webp 1200w, /landing/network-dark.webp 3200w" sizes="(max-width: 760px) 90vw, 30vw"/><img src="/landing/network-light.webp" srcSet="/landing/network-light-1200.webp 1200w, /landing/network-light.webp 3200w" sizes="(max-width: 760px) 90vw, 30vw" alt="Network operations template preview" width="3200" height="2000" loading="lazy" decoding="async"/></picture></div><div class="landing-template-copy"><p class="landing-eyebrow">Infrastructure</p><h3>Network operations<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right" aria-hidden="true"><path d="M7 7h10v10"></path><path d="M7 17 17 7"></path></svg></h3><p>Bring traffic, service health, and system activity into focus.</p><span class="landing-text-link">Explore template<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></span></div></a></article></div><div class="landing-template-more"><span>There’s more to build on.</span><a href="/wearable">Health & activity<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right" aria-hidden="true"><path d="M7 7h10v10"></path><path d="M7 17 17 7"></path></svg></a><a href="/layout">Application shell<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right" aria-hidden="true"><path d="M7 7h10v10"></path><path d="M7 17 17 7"></path></svg></a><a href="/login">Sign-in page<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right" aria-hidden="true"><path d="M7 7h10v10"></path><path d="M7 17 17 7"></path></svg></a></div></section><section class="landing-brand-story" aria-labelledby="brand-title"><div class="landing-brand-intro"><p class="landing-eyebrow">The Basalt mark</p><h2 id="brand-title">Craft in<br/>every layer.</h2><p>A familiar silhouette.<br/>A character all its own.</p></div><div class="landing-brand-artwork"><div class="landing-brand-orbit" aria-hidden="true"></div><div class="landing-brand-glow" aria-hidden="true"></div><div class="landing-brand-float"><img class="landing-brand-mark" src="/landing/tower.webp" width="1280" height="1280" alt="The Basalt corner tower, with white marble, blue and green roofs, pink columns, and gold details" loading="lazy" decoding="async" draggable="false"/></div></div><div class="landing-brand-details"><span class="landing-brand-material">01 / Form & material</span><p>White marble. Colorful roofs. A corner tower built from small, considered details.</p><p>That same care for proportion, layers, and color runs through the entire design system.</p><div class="landing-brand-colors" role="img" aria-label="Basalt colors: blue, pink, green, and gold"><span></span><span></span><span></span><span></span></div><a href="/palette" class="landing-text-link">Explore our colors<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right" aria-hidden="true"><path d="M7 7h10v10"></path><path d="M7 17 17 7"></path></svg></a></div></section><section class="landing-section landing-foundation" aria-labelledby="foundation-title"><div class="landing-section-heading"><div><p class="landing-eyebrow">The details add up</p><h2 id="foundation-title">Quiet by design.<br/>Capable by default.</h2></div><p>A consistent foundation from your first button to your busiest screen. Built to feel like one product.</p></div><div class="landing-feature-grid"><article class="landing-feature"><div class="landing-feature-sample"><div class="landing-component-sample" aria-hidden="true"><div class="landing-sample-actions"><span class="landing-sample-primary"><svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus" aria-hidden="true"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg> Create project</span><span class="landing-sample-icon"><svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus" aria-hidden="true"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg></span></div><div class="landing-sample-controls"><span class="landing-sample-status"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg> Published</span><span class="landing-sample-switch"><span></span></span><span class="landing-sample-checkbox"><svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg></span></div></div></div><h3>Every detail belongs.</h3><p>Buttons, inputs, menus, and dialogs share the same spacing, shape, and interaction language. Less time reconciling the details.</p><a href="/ui" class="landing-text-link">Explore components<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></a></article><article class="landing-feature"><div class="landing-feature-sample"><div class="landing-chart-sample" aria-hidden="true"><div class="landing-sample-metric"><span>Monthly revenue</span><strong>$24,680 <small>+12.8%</small></strong></div><div class="landing-sample-bars"><span style="height:36%"></span><span style="height:54%"></span><span style="height:43%"></span><span style="height:66%"></span><span style="height:52%"></span><span style="height:78%"></span><span style="height:68%"></span><span style="height:58%"></span><span style="height:85%"></span><span style="height:72%"></span><span style="height:92%"></span><span style="height:80%"></span></div></div></div><h3>Give your data a voice.</h3><p>From a quiet sparkline to a full analytics view. Charts and data patterns designed to make dense information easier to read.</p><a href="/ui?category=chart" class="landing-text-link">Explore charts<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></a></article><article class="landing-feature"><div class="landing-feature-sample"><div class="landing-surface-sample" aria-hidden="true"><div class="landing-surface-half light"><div class="landing-surface-island"><div class="landing-surface-card"><span></span><span></span><span></span></div></div></div><div class="landing-surface-half dark"><div class="landing-surface-island"><div class="landing-surface-card"><span></span><span></span><span></span></div></div></div></div></div><h3>Depth without distraction.</h3><p>Matte surfaces, measured contrast, and a palette that feels at home in light and dark. One system, with room to make it yours.</p><a href="/palette" class="landing-text-link">Explore the palette<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></a></article></div></section><section id="get-started" class="landing-install" aria-labelledby="install-title"><div><p class="landing-eyebrow"><svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-code-xml lucide-code-2" aria-hidden="true"><path d="m18 16 4-4-4-4"></path><path d="m6 8-4 4 4 4"></path><path d="m14.5 4-5 16"></path></svg> From here, it’s yours</p><h2 id="install-title">Make something<br/>worth using.</h2><p>Start with a component. Grow into a system.<br/>The source is open, and the next move is yours.</p><a href="/ui" class="landing-button landing-button-primary">Open the catalog<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></a></div><div class="landing-install-panel"><div class="landing-install-label"><span>Start building</span><span>npm</span></div><div class="landing-install-command"><span aria-hidden="true">$</span><code>npm i @nocoo/basalt lucide-react</code></div><div class="landing-install-details"><span><svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check-check" aria-hidden="true"><path d="M18 6 7 17l-5-5"></path><path d="m22 10-7.5 7.5L13 16"></path></svg> React 19 & TypeScript</span><span><svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check-check" aria-hidden="true"><path d="M18 6 7 17l-5-5"></path><path d="m22 10-7.5 7.5L13 16"></path></svg> Tailwind v4 or standalone CSS</span></div><a href="https://github.com/nocoo/basalt#readme" target="_blank" rel="noopener noreferrer" class="landing-text-link">Read the installation guide<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right" aria-hidden="true"><path d="M7 7h10v10"></path><path d="M7 17 17 7"></path></svg></a></div></section><section class="landing-faq landing-section" aria-labelledby="faq-title"><div><p class="landing-eyebrow">A few useful answers</p><h2 id="faq-title">Before you begin.</h2><a href="https://github.com/nocoo/basalt" target="_blank" rel="noopener noreferrer" class="landing-text-link">More on GitHub<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right" aria-hidden="true"><path d="M7 7h10v10"></path><path d="M7 17 17 7"></path></svg></a></div><div class="landing-faq-list"><details><summary>What is Basalt?<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus" aria-hidden="true"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg></summary><p>Basalt is an open-source React 19 UI library for dashboards and information-rich software. It includes components, charts, reusable blocks, and working example layouts, with TypeScript APIs and a live catalog.</p></details><details><summary>Can I use it in a commercial project?<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus" aria-hidden="true"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg></summary><p>Yes. The component library and example source are available under the MIT license. You can use and adapt them for personal and commercial projects, keeping the license notice with the source.</p></details><details><summary>Do I need Tailwind CSS?<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus" aria-hidden="true"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg></summary><p>No. Basalt supports Tailwind CSS v4 and also ships standalone CSS. Use the setup that fits your application; both share the same design tokens and components.</p></details><details><summary>Are the templates complete applications?<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus" aria-hidden="true"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg></summary><p>The examples are working frontend layouts with sample data. Use them as a starting point, then connect your own authentication, data sources, and business logic. The repository includes integration guides and reusable application recipes.</p></details></div></section></div></main><footer class="landing-footer"><div class="landing-container"><div class="landing-footer-top"><div><a href="/" class="landing-brand" aria-label="Basalt home"><img src="/logo-128.png" srcSet="/logo-128.png 1x, /logo-256.png 2x" width="24" height="24" alt="" class="landing-logo"/><span>basalt.</span></a><p>Dense, dark, durable.<br/>A little less noise. A better place to build.</p></div><nav aria-label="Product"><h2>Explore</h2><a href="/ui">Components</a><a href="#templates">Templates</a><a href="/palette">Color palette</a></nav><nav aria-label="Resources"><h2>Resources</h2><a href="https://www.npmjs.com/package/@nocoo/basalt" target="_blank" rel="noopener noreferrer">npm</a><a href="https://github.com/nocoo/basalt" target="_blank" rel="noopener noreferrer">GitHub</a><a href="/llms.txt">For AI agents</a></nav><nav aria-label="Related projects"><h2>Elsewhere</h2><a href="https://hexly.ai/" target="_blank" rel="noopener noreferrer">Portfolio</a><a href="https://lizheng.me/" target="_blank" rel="noopener noreferrer">Play</a><a href="https://lizheng.blog/" target="_blank" rel="noopener noreferrer">Journal</a><a href="https://lizheng.dev/" target="_blank" rel="noopener noreferrer">Résumé</a></nav></div><div class="landing-footer-bottom"><p>Family of <a href="https://hexly.ai/" target="_blank" rel="noopener noreferrer">hexly.ai</a>. Released under the MIT license.</p><div class="landing-footer-actions"><span class="landing-footer-signature">Built with Basalt, naturally.<span class="landing-status-dot"></span></span><a href="#top" class="landing-back-to-top">Back to top<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up" aria-hidden="true"><path d="m5 12 7-7 7 7"></path><path d="M12 19V5"></path></svg></a></div></div></div></footer></div><!--/seo:body--></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>