From 5363668dc25ae935a99b971ac9001e1dd57ab337 Mon Sep 17 00:00:00 2001 From: Bartosz-Do <1282324+codecalm@users.noreply.github.com> Date: Wed, 12 Aug 2026 23:55:36 +0200 Subject: [PATCH] Redesign Interface demo pages for clarity and consistency (#2863) Co-authored-by: Claude Sonnet 5 --- .changeset/interface-pages-consistency.md | 5 + .changeset/prose-page.md | 5 + preview/pages/accordion.astro | 28 +- preview/pages/alerts.astro | 43 ++- preview/pages/avatars.astro | 53 ++- preview/pages/badges.astro | 382 ++++++++++++---------- preview/pages/carousel.astro | 13 +- preview/pages/colors.astro | 36 +- preview/pages/datagrid.astro | 13 +- preview/pages/dropdowns.astro | 13 +- preview/pages/lists.astro | 13 +- preview/pages/modals.astro | 13 +- preview/pages/navigation.astro | 13 +- preview/pages/offcanvas.astro | 14 +- preview/pages/pagination.astro | 18 +- preview/pages/patterns.astro | 13 +- preview/pages/placeholder.astro | 21 +- preview/pages/prose.astro | 155 +++++++++ preview/pages/segmented-control.astro | 38 ++- preview/pages/social-icons.astro | 29 +- preview/pages/steps.astro | 75 ++++- preview/pages/tabs.astro | 13 +- preview/pages/tags.astro | 25 +- preview/pages/toasts.astro | 13 +- preview/pages/tracking.astro | 17 +- 25 files changed, 798 insertions(+), 263 deletions(-) create mode 100644 .changeset/interface-pages-consistency.md create mode 100644 .changeset/prose-page.md create mode 100644 preview/pages/prose.astro diff --git a/.changeset/interface-pages-consistency.md b/.changeset/interface-pages-consistency.md new file mode 100644 index 000000000..20cce902f --- /dev/null +++ b/.changeset/interface-pages-consistency.md @@ -0,0 +1,5 @@ +--- +"@tabler/preview": patch +--- + +Made Interface demo pages consistent with the Buttons page: card subtitles, one docs link, responsive grids. diff --git a/.changeset/prose-page.md b/.changeset/prose-page.md new file mode 100644 index 000000000..c37f8288e --- /dev/null +++ b/.changeset/prose-page.md @@ -0,0 +1,5 @@ +--- +"@tabler/preview": minor +--- + +Added the missing Prose demo page, linked from the menu but not previously built. diff --git a/preview/pages/accordion.astro b/preview/pages/accordion.astro index 0ddac6abc..1810bf951 100644 --- a/preview/pages/accordion.astro +++ b/preview/pages/accordion.astro @@ -3,25 +3,45 @@ import DefaultLayout from '@shared/layouts/DefaultLayout.astro' import Accordion from '@ui/Accordion.astro' import Card from '@ui/Card.astro' import CardBody from '@ui/CardBody.astro' +import CardTitle from '@ui/CardTitle.astro' +import Icon from '@ui/Icon.astro' +import { getDocsUrl } from '@shared/lib/string-format' + +const accordionDocsUrl = getDocsUrl('/ui/components/accordion') --- - + +
+

Accordion

+ + Docs + +
+
+ Default +
The base accordion — one panel open at a time.
+ + Flush +
Add flush to remove the card border and rounded corners.
+
+ Tabs +
Add tabs for a tab-like header instead of the default style.
 @@ -29,6 +49,8 @@ import CardBody from '@ui/CardBody.astro'
+ Inverted +
Add inverted to flip the toggle icon to the start of the header.
 @@ -36,6 +58,8 @@ import CardBody from '@ui/CardBody.astro'
+ Inverted with plus icon +
Combine inverted with a custom toggleIcon.
 @@ -43,6 +67,8 @@ import CardBody from '@ui/CardBody.astro'
+ With icons +
Add showIcon to show an icon next to each panel's title.
 diff --git a/preview/pages/alerts.astro b/preview/pages/alerts.astro index 2b1480e93..bb750e8ad 100644 --- a/preview/pages/alerts.astro +++ b/preview/pages/alerts.astro @@ -4,14 +4,26 @@ import Alert from '@ui/Alert.astro' import Card from '@ui/Card.astro' import CardBody from '@ui/CardBody.astro' import CardTitle from '@ui/CardTitle.astro' +import Icon from '@ui/Icon.astro' +import { getDocsUrl } from '@shared/lib/string-format' + +const alertDocsUrl = getDocsUrl('/ui/components/alert') --- - + +
+

Alerts

+ + Docs + +
+
-
+
- Basic alerts + Basic +
A title and a color are enough to show the status of an action.
@@ -19,10 +31,11 @@ import CardTitle from '@ui/CardTitle.astro'
-
+
- Alerts with action + With action +
Add a link with the action prop to give users something to do next.
@@ -30,10 +43,11 @@ import CardTitle from '@ui/CardTitle.astro'
-
+
- Dismissible alerts + Dismissible +
Add showClose to let users close the alert.
@@ -41,10 +55,11 @@ import CardTitle from '@ui/CardTitle.astro'
-
+
- Alert with a description + With a description +
Add a description or a list when the title alone isn't enough context.
@@ -52,10 +67,11 @@ import CardTitle from '@ui/CardTitle.astro'
-
+
- Important alerts + Important +
Add important for a bolder style that stands out from the rest of the page.
@@ -63,10 +79,11 @@ import CardTitle from '@ui/CardTitle.astro'
-
+
- Minor alerts + Minor +
Add minor for a quieter style that fits inline with other content.
diff --git a/preview/pages/avatars.astro b/preview/pages/avatars.astro index 3955e0750..f2baf84ce 100644 --- a/preview/pages/avatars.astro +++ b/preview/pages/avatars.astro @@ -6,9 +6,10 @@ import AvatarList from '@ui/AvatarList.astro' import Card from '@ui/Card.astro' import CardBody from '@ui/CardBody.astro' import CardTitle from '@ui/CardTitle.astro' +import Icon from '@ui/Icon.astro' import people from '@data/people.json' import { site } from '@shared/lib/site' -import { firstLetters } from '@shared/lib/string-format' +import { firstLetters, getDocsUrl } from '@shared/lib/string-format' const iconIcons = ['user', 'settings', 'car', 'balloon', 'users', 'users-group', 'apps', 'ghost'] @@ -22,64 +23,77 @@ const listSizes = ['xxs', 'xs', 'sm', 'md', 'lg'] as const const uploadSizes = ['xxs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl'] as const const statusColors = ['red', 'green', 'blue', 'yellow', 'secondary'] const brands = ['netflix', 'amazon', 'messenger', 'figma', 'twitch'] + +const avatarDocsUrl = getDocsUrl('/ui/components/avatar') --- - + +
+

Avatars

+ + Docs + +
+
-
+
Default avatar +
The base .avatar element — a placeholder box for a photo, icon, or initials.
-
+
Avatar with icon - +
Use an icon instead of a photo with the icon prop.
{iconIcons.map((icon) => )}
-
+
- Avatar with icon - + Avatar icon colors +
Combine an icon avatar with any theme color.
{colors.map((color) => )}
-
+
Simple avatar +
Pass a person object to render their photo.
{people8.map((person) => )}
-
+
Avatar placeholder +
Fall back to initials with the placeholder prop when there's no photo.
{people8.map((person) => )}
-
+
Avatar shapes +
Square by default — add .rounded-circle or .rounded-0 to change the shape.
@@ -88,10 +102,11 @@ const brands = ['netflix', 'amazon', 'messenger', 'figma', 'twitch']
-
+
Avatar sizes +
Six sizes from xxs to xl, for both photos and placeholders.
@@ -107,10 +122,11 @@ const brands = ['netflix', 'amazon', 'messenger', 'figma', 'twitch']
-
+
Avatar lists +
Stack avatars with <AvatarList> to show a group at a glance.
{ listSizes.map((size) => ( @@ -138,26 +154,29 @@ const brands = ['netflix', 'amazon', 'messenger', 'figma', 'twitch']
-
+
- Avatar placeholder + Avatar upload +
An upload control styled as an avatar, for profile photo pickers.
{uploadSizes.map((size) => )}
-
+
Avatar statuses +
Add a status dot to show online, away, or busy state.
{statusColors.map((color, i) => )}
-
+
Avatar brands +
Show a recognizable brand icon instead of a person.
{brands.map((brand, i) => )} diff --git a/preview/pages/badges.astro b/preview/pages/badges.astro index 1f7090aaa..e0c528951 100644 --- a/preview/pages/badges.astro +++ b/preview/pages/badges.astro @@ -10,196 +10,216 @@ import CardBody from '@ui/CardBody.astro' import CardTitle from '@ui/CardTitle.astro' import DropdownMenu from '@ui/DropdownMenu.astro' import site from '@data/site.json' -import { ucFirst } from '@shared/lib/string-format' +import { ucFirst, getDocsUrl } from '@shared/lib/string-format' const colors = ['default', ...Object.keys(site.colors), 'dark', 'light'] const sizes = ['sm', 'md', 'lg'] + +const badgeDocsUrl = getDocsUrl('/ui/components/badge') --- - -
-
-
-
- - -

Example heading New

-

Example heading New

-

Example heading New

-

Example heading New

-
Example heading New
-
Example heading New
- - -
-
- - - Badge sizes + +
+

Badges

+ + Docs + +
-
- { - sizes.map((size) => ( - - Default - - Left icon - - - Right icon - - - - - - - )) - } -
- - -
-
- - - Positioned badges - - - - - - - - - - - - - - - - -
-
+ + Right icon + + + + + + + )) + } +
+ +
-
-
-
- - - Basic badges - - {colors.map((color) => {ucFirst(color)})} - - - -
-
- - - Light badges - - {colors.map((color) => {ucFirst(color)})} - - - -
-
- - - Outline badges - - {colors.map((color) => {ucFirst(color)})} - - - -
-
- - - Badges with icons - - { - colors.map((color) => ( - - {' '} - {ucFirst(color)}{' '} - - )) - } - - - -
-
+
+ + + Positioned +
Attach a count or a dot to a button with .badge-notification.
+ + + + + + + + + + + + + + +
-
-
-
-
- - - - { - colors.map((color, index) => ( - - )) - } - - - -
-
- - - - { - colors.map((color, index) => ( - - )) - } - - - -
-
- - - - { - colors.map((color) => ( - - )) - } - - - -
-
+
+ + + In a dropdown +
A badge inside a dropdown item.
+ + + +
+
+ + + On buttons +
Pair any badge color with a button label.
+ + { + colors.map((color, index) => ( + + )) + } + + + +
+
+ + + Notification dot +
A pill-shaped counter positioned on the corner of a button.
+ + { + colors.map((color, index) => ( + + )) + } + + + +
+
+ + + Blinking notification +
Add .badge-blink to draw attention to unread activity.
+ + { + colors.map((color) => ( + + )) + } + + + +
+
+ +
+
+ + + Basic +
Fill a badge with a theme or extended color.
+ + {colors.map((color) => {ucFirst(color)})} + + + +
+
+ + + Light +
A tinted background for a softer, secondary badge.
+ + {colors.map((color) => {ucFirst(color)})} + + + +
+
+ + + Outline +
A colored border with a transparent background.
+ + {colors.map((color) => {ucFirst(color)})} + + + +
+
+ + + With icons +
Add an icon before the label to reinforce its meaning.
+ + { + colors.map((color) => ( + + {' '} + {ucFirst(color)}{' '} + + )) + } + + +
diff --git a/preview/pages/carousel.astro b/preview/pages/carousel.astro index f26d9814c..2007577ae 100644 --- a/preview/pages/carousel.astro +++ b/preview/pages/carousel.astro @@ -1,9 +1,20 @@ --- import DefaultLayout from '@shared/layouts/DefaultLayout.astro' import CarouselCard from '@shared/components/cards/CarouselCard.astro' +import Icon from '@ui/Icon.astro' +import { getDocsUrl } from '@shared/lib/string-format' + +const carouselDocsUrl = getDocsUrl('/ui/components/carousel') --- - + +
+

Carousel

+ + Docs + +
+
diff --git a/preview/pages/colors.astro b/preview/pages/colors.astro index d1a13051a..edc7b330d 100644 --- a/preview/pages/colors.astro +++ b/preview/pages/colors.astro @@ -6,7 +6,9 @@ import Card from '@ui/Card.astro' import CardBody from '@ui/CardBody.astro' import Avatar from '@ui/Avatar.astro' import CardTitle from '@ui/CardTitle.astro' +import Icon from '@ui/Icon.astro' import site from '@data/site.json' +import { getDocsUrl } from '@shared/lib/string-format' type ColorEntry = [string, { title: string; hex: string; abbr?: string; icon?: string }] @@ -16,13 +18,24 @@ const grayColors = Object.entries(site.grayColors) as ColorEntry[] const socialColors = Object.entries(site.socialColors) as ColorEntry[] const gradientColors = [...Object.keys(site.colors), 'inverted', 'white', 'transparent'] + +const colorsDocsUrl = getDocsUrl('/ui/base/colors') --- - + +
+

Colors

+ + Docs + +
+
-
+
+ Colors +
The extended color palette, with hex values.
{ colors.map(([name, color]) => ( @@ -44,9 +57,11 @@ const gradientColors = [...Object.keys(site.colors), 'inverted', 'white', 'trans
-
+
+ Light colors +
A tinted, low-contrast version of each color.
{ lightColors.map(([name, color]) => ( @@ -68,9 +83,11 @@ const gradientColors = [...Object.keys(site.colors), 'inverted', 'white', 'trans
-
+
+ Gray colors +
The neutral gray scale used for text, borders, and backgrounds.
{ grayColors.map(([name, color]) => ( @@ -92,9 +109,11 @@ const gradientColors = [...Object.keys(site.colors), 'inverted', 'white', 'trans
-
+
+ Social colors +
Brand colors for social networks.
{ socialColors.map(([name, color]) => ( @@ -118,10 +137,11 @@ const gradientColors = [...Object.keys(site.colors), 'inverted', 'white', 'trans
-
+
Gradient +
Build a gradient from any two colors and preview it live.
@@ -174,9 +194,11 @@ const gradientColors = [...Object.keys(site.colors), 'inverted', 'white', 'trans
-
+
+ Gradient colors +
Every color faded to transparent, fading in from the left or the right.
diff --git a/preview/pages/datagrid.astro b/preview/pages/datagrid.astro index f50c21bda..ae8ebaf89 100644 --- a/preview/pages/datagrid.astro +++ b/preview/pages/datagrid.astro @@ -3,10 +3,21 @@ import DefaultLayout from '@shared/layouts/DefaultLayout.astro' import Card from '@ui/Card.astro' import CardHeader from '@ui/CardHeader.astro' import CardBody from '@ui/CardBody.astro' +import Icon from '@ui/Icon.astro' import Datagrid from '@shared/components/parts/Datagrid.astro' +import { getDocsUrl } from '@shared/lib/string-format' + +const datagridDocsUrl = getDocsUrl('/ui/components/datagrid') --- - + +
+

Data grid

+ + Docs + +
+ diff --git a/preview/pages/dropdowns.astro b/preview/pages/dropdowns.astro index f662f8438..77cbd84d7 100644 --- a/preview/pages/dropdowns.astro +++ b/preview/pages/dropdowns.astro @@ -2,9 +2,20 @@ import DefaultLayout from '@shared/layouts/DefaultLayout.astro' import DropdownMenu from '@ui/DropdownMenu.astro' import DropdownMenuAll from '@ui/DropdownMenuAll.astro' +import Icon from '@ui/Icon.astro' +import { getDocsUrl } from '@shared/lib/string-format' + +const dropdownDocsUrl = getDocsUrl('/ui/components/dropdown') --- - + +
+

Dropdowns

+ + Docs + +
+
diff --git a/preview/pages/lists.astro b/preview/pages/lists.astro index 208ab4dc1..3629dc361 100644 --- a/preview/pages/lists.astro +++ b/preview/pages/lists.astro @@ -2,14 +2,25 @@ import DefaultLayout from '@shared/layouts/DefaultLayout.astro' import Card from '@ui/Card.astro' import CardHeader from '@ui/CardHeader.astro' +import Icon from '@ui/Icon.astro' import UsersList from '@shared/components/cards/UsersList.astro' import UsersList2 from '@shared/components/cards/UsersList2.astro' import UsersListHeaders from '@shared/components/cards/UsersListHeaders.astro' import ListGroup from '@ui/ListGroup.astro' import ListGroupItem from '@ui/ListGroupItem.astro' +import { getDocsUrl } from '@shared/lib/string-format' + +const listGroupDocsUrl = getDocsUrl('/ui/components/list-group') --- - + +
+

Lists

+ + Docs + +
+
diff --git a/preview/pages/modals.astro b/preview/pages/modals.astro index 5cc54ac1a..b48d2cba0 100644 --- a/preview/pages/modals.astro +++ b/preview/pages/modals.astro @@ -4,6 +4,7 @@ import DefaultLayout from '@shared/layouts/DefaultLayout.astro' import Card from '@ui/Card.astro' import CardBody from '@ui/CardBody.astro' +import Icon from '@ui/Icon.astro' import ModalInline from '@shared/components/modals/ModalInline.astro' import SimpleModalContent from '@shared/components/modals/SimpleModalContent.astro' import LargeModalContent from '@shared/components/modals/LargeModalContent.astro' @@ -22,11 +23,21 @@ import EditProfileModalContent from '@shared/components/modals/EditProfileModalC import ConfirmDeleteModalContent from '@shared/components/modals/ConfirmDeleteModalContent.astro' import ChangePasswordModalContent from '@shared/components/modals/ChangePasswordModalContent.astro' import AddTaskModalContent from '@shared/components/modals/AddTaskModalContent.astro' +import { getDocsUrl } from '@shared/lib/string-format' const cardClass = 'position-relative rounded d-block bg-surface-backdrop py-6 w-auto h-auto z-0' + +const modalDocsUrl = getDocsUrl('/ui/components/modal') --- - + +
+

Modals

+ + Docs + +
+
diff --git a/preview/pages/navigation.astro b/preview/pages/navigation.astro index 183ffe08c..f47867b87 100644 --- a/preview/pages/navigation.astro +++ b/preview/pages/navigation.astro @@ -4,9 +4,20 @@ // fluid-search (variant 5) is a no-op — search block in condensed branch is dead code. import DefaultLayout from '@shared/layouts/DefaultLayout.astro' import Navbar from '@shared/components/navbar/Navbar.astro' +import Icon from '@ui/Icon.astro' +import { getDocsUrl } from '@shared/lib/string-format' + +const navbarDocsUrl = getDocsUrl('/ui/layout/navbars') --- - + +
+

Navigation

+ + Docs + +
+
diff --git a/preview/pages/offcanvas.astro b/preview/pages/offcanvas.astro index cfc9bbdb6..c48ca2826 100644 --- a/preview/pages/offcanvas.astro +++ b/preview/pages/offcanvas.astro @@ -1,17 +1,27 @@ --- import DefaultLayout from '@shared/layouts/DefaultLayout.astro' -import { ucFirst as capitalize } from '@shared/lib/string-format' +import { ucFirst as capitalize, getDocsUrl } from '@shared/lib/string-format' import ButtonList from '@ui/ButtonList.astro' import Card from '@ui/Card.astro' import CardBody from '@ui/CardBody.astro' +import Icon from '@ui/Icon.astro' import Offcanvas from '@ui/Offcanvas.astro' import OffcanvasHeader from '@ui/OffcanvasHeader.astro' import OffcanvasBody from '@ui/OffcanvasBody.astro' const directions = ['start', 'end', 'top', 'bottom'] as const + +const offcanvasDocsUrl = getDocsUrl('/ui/components/offcanvas') --- - + +
+

Offcanvas

+ + Docs + +
+ diff --git a/preview/pages/pagination.astro b/preview/pages/pagination.astro index 2f896d28e..3df0e0e43 100644 --- a/preview/pages/pagination.astro +++ b/preview/pages/pagination.astro @@ -3,13 +3,27 @@ import DefaultLayout from '@shared/layouts/DefaultLayout.astro' import Pagination from '@ui/Pagination.astro' import Card from '@ui/Card.astro' import CardBody from '@ui/CardBody.astro' +import CardTitle from '@ui/CardTitle.astro' +import Icon from '@ui/Icon.astro' +import { getDocsUrl } from '@shared/lib/string-format' + +const paginationDocsUrl = getDocsUrl('/ui/components/pagination') --- - + +
+

Pagination

+ + Docs + +
+
+ Numbered +
Page numbers, with or without text Prev/Next labels.
 @@ -18,6 +32,8 @@ import CardBody from '@ui/CardBody.astro'
+ With descriptions +
Add prevDescription/nextDescription to name the adjacent page.
 diff --git a/preview/pages/patterns.astro b/preview/pages/patterns.astro index f2e4b716c..9f808bf81 100644 --- a/preview/pages/patterns.astro +++ b/preview/pages/patterns.astro @@ -3,16 +3,27 @@ import DefaultLayout from '@shared/layouts/DefaultLayout.astro' import Card from '@ui/Card.astro' import CardBody from '@ui/CardBody.astro' import CardTitle from '@ui/CardTitle.astro' +import Icon from '@ui/Icon.astro' import BackgroundPattern from '@ui/BackgroundPattern.astro' import site from '@data/site.json' +import { getDocsUrl } from '@shared/lib/string-format' const patternColors = Object.keys(site.colors) const patternSizes = ['sm', 'md', 'lg', 'xl'] as const const patterns = ['diagonal', 'diagonal-2', 'dots', 'rectangles', 'lines', 'lines-vertical', 'grid', 'grid-diagonal', 'blueprint', 'circles', 'diagonal-stripes', 'diagonal-stripes-2', 'zigzag', 'vertical-stripes', 'horizontal-stripes'] as const + +const patternsDocsUrl = getDocsUrl('/ui/utilities/background-patterns') --- - + +
+

Patterns

+ + Docs + +
+
diff --git a/preview/pages/placeholder.astro b/preview/pages/placeholder.astro index df8f2d53e..7674ae077 100644 --- a/preview/pages/placeholder.astro +++ b/preview/pages/placeholder.astro @@ -1,25 +1,36 @@ --- import DefaultLayout from '@shared/layouts/DefaultLayout.astro' +import Icon from '@ui/Icon.astro' import PlaceholderCard1 from '@shared/components/cards/placeholder/Card1.astro' import PlaceholderCard2 from '@shared/components/cards/placeholder/Card2.astro' import PlaceholderCard3 from '@shared/components/cards/placeholder/Card3.astro' import PlaceholderCard4 from '@shared/components/cards/placeholder/Card4.astro' import PlaceholderCard5 from '@shared/components/cards/placeholder/Card5.astro' import PlaceholderCard6 from '@shared/components/cards/placeholder/Card6.astro' +import { getDocsUrl } from '@shared/lib/string-format' const cols = [1, 2, 3, 4] + +const placeholderDocsUrl = getDocsUrl('/ui/components/placeholder') --- - + +
+

Placeholder

+ + Docs + +
+
{ cols.map(() => ( -
+
)) } -
+
@@ -29,7 +40,7 @@ const cols = [1, 2, 3, 4]
-
+
@@ -39,7 +50,7 @@ const cols = [1, 2, 3, 4]
-
+
diff --git a/preview/pages/prose.astro b/preview/pages/prose.astro new file mode 100644 index 000000000..94e44afd8 --- /dev/null +++ b/preview/pages/prose.astro @@ -0,0 +1,155 @@ +--- +import DefaultLayout from '@shared/layouts/DefaultLayout.astro' +import Prose from '@ui/Prose.astro' +import Icon from '@ui/Icon.astro' +import Avatar from '@ui/Avatar.astro' +import { getDocsUrl } from '@shared/lib/string-format' + +const proseDocsUrl = getDocsUrl('/ui/base/prose') +--- + + +
+

Prose

+ + Docs + +
+ +
+
+
+
+ +

Getting started with documentation New

+
+ + Written by Paweł Kuna · 6 min read +
+

+ Writing clear and effective documentation is essential for any project. When you create content that others will read and use, proper formatting makes all the difference. Good documentation helps users understand complex concepts quickly and efficiently. +

+
+

Documentation is a love letter that you write to your future self.

+
+

+ The foundation of great documentation starts with understanding your audience and their needs. Along the way you'll reach for a handful of inline elements: highlights to draw the eye, an HTML tag for terms that deserve a definition, + and outdated advice replaced with the current recommendation. Formulas read naturally too, like H2O or 210. +

+

+ As The Elements of Style puts it, omit needless words — the same rule applies to interfaces and to the docs that explain them. +

+ +
+

+ Tip. Keep a glossary of terms your readers might not know. It saves you from re-explaining the same concept in every article. +

+
+ +

A quick glossary

+
+
Prose
+
Long-form, readable content — articles, changelogs, help center entries.
+
Markdown
+
A plain-text format that compiles down to the same HTML this page uses.
+
Style guide
+
A shared reference so every writer on the team formats things the same way.
+
+ +

Adding code examples

+

+ Inline code looks like console.log("Hello") and uses monospace styling. For anything longer, drop it into a code block, and mention shortcuts with Ctrl + C style keys: +

+ 
{`function add(a, b) {\n  return a + b;\n}`}
+ +

Structuring steps and points

+

Use an ordered list to walk through a process:

+
    +
  1. Start with the most important information.
    2. +
  2. Provide context before technical details.
    3. +
  3. Include practical examples.
    4. +
+

And an unordered list for related points that don't have a specific order:

+
    +
  • Write clear, concise list items.
    • +
  • Keep the structure consistent.
    • +
  • Avoid overly long items.
    • +
+ +

Nesting related items

+

Lists can nest, with indentation and spacing handled automatically:

+
    +
  • + Editing +
      +
    • Undo and redo
      • +
    • Cut, copy, and paste
      • +
    +
    • +
  • + Formatting +
      +
    • Bold and italic
      • +
    • Headings and lists
      • +
    +
    • +
  • Sharing
    • +
+ +

A visual checklist

+

For a status readers can scan at a glance, drop in the steps component instead of a plain list:

+
    +
  • Draft
    • +
  • Review
    • +
  • Publish
    • +
  • Announce
    • +
+ +
+ +

Supporting images

+

Images should support the text and provide useful context, not just decorate the page.

+
+ Open book and coffee +
A quiet spot makes for better writing sessions.
+
+ +

Comparing data in tables

+

Tables work best for comparing related data points, like votes on a proposal:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameUp-votesDown-votes
Alice1011
Bob43
Charlie79
Totals2123
+ +
+
+
+
+ diff --git a/preview/pages/segmented-control.astro b/preview/pages/segmented-control.astro index 9bcc2a5d8..636af23e6 100644 --- a/preview/pages/segmented-control.astro +++ b/preview/pages/segmented-control.astro @@ -3,13 +3,27 @@ import DefaultLayout from '@shared/layouts/DefaultLayout.astro' import NavSegmented from '@ui/NavSegmented.astro' import Card from '@ui/Card.astro' import CardBody from '@ui/CardBody.astro' +import CardTitle from '@ui/CardTitle.astro' +import Icon from '@ui/Icon.astro' +import { getDocsUrl } from '@shared/lib/string-format' + +const segmentedControlDocsUrl = getDocsUrl('/ui/components/segmented-control') --- - + +
+

Segmented control

+ + Docs + +
+
+ Basic +
A list of items is enough for a plain control.
 @@ -17,6 +31,8 @@ import CardBody from '@ui/CardBody.astro'
+ Any content +
Items can be any short text, including emoji.
 @@ -24,6 +40,8 @@ import CardBody from '@ui/CardBody.astro'
+ Icons only +
Pass icons without items for an icon-only control.
 @@ -31,6 +49,8 @@ import CardBody from '@ui/CardBody.astro'
+ With icons +
Combine items and icons to label each option.
 @@ -38,6 +58,8 @@ import CardBody from '@ui/CardBody.astro'
+ Vertical +
Add vertical to stack the options in a column.
 @@ -45,6 +67,8 @@ import CardBody from '@ui/CardBody.astro'
+ Vertical with disabled items +
Pass indexes to disabled to make specific options unselectable.
 @@ -52,6 +76,8 @@ import CardBody from '@ui/CardBody.astro'
+ Disabled items +
Disabled options stay visible but can't be selected.
 @@ -59,6 +85,8 @@ import CardBody from '@ui/CardBody.astro'
+ Vertical, no icons +
A vertical control also works with text-only items.
 @@ -66,6 +94,8 @@ import CardBody from '@ui/CardBody.astro'
+ Independent group +
Set a unique name so this control doesn't share selection state with others using the same items.
 @@ -73,6 +103,8 @@ import CardBody from '@ui/CardBody.astro'
+ Full width +
Add fullWidth to stretch the control across its container.
 @@ -80,6 +112,8 @@ import CardBody from '@ui/CardBody.astro'
+ Full width, stacked +
Multiple full-width controls, one above the other.
@@ -90,6 +124,8 @@ import CardBody from '@ui/CardBody.astro'
+ Sizes +
Set size to sm or lg — with text, icons, or both.
diff --git a/preview/pages/social-icons.astro b/preview/pages/social-icons.astro index 202f97ff6..3f31519ba 100644 --- a/preview/pages/social-icons.astro +++ b/preview/pages/social-icons.astro @@ -4,10 +4,12 @@ import DefaultLayout from '@shared/layouts/DefaultLayout.astro' import ButtonList from '@ui/ButtonList.astro' import Trending from '@ui/Trending.astro' import Card from '@ui/Card.astro' -import CardHeader from '@ui/CardHeader.astro' import CardBody from '@ui/CardBody.astro' +import CardTitle from '@ui/CardTitle.astro' +import Icon from '@ui/Icon.astro' import socialTiles from '@data/social-tiles.json' import socials from '@data/socials.json' +import { getDocsUrl } from '@shared/lib/string-format' interface SocialTile { icon: string @@ -24,15 +26,24 @@ interface Social { const tiles = socialTiles as SocialTile[] const socialList = socials as Social[] const fillers = Array.from({ length: 21 }) + +const socialDocsUrl = getDocsUrl('/ui/plugins/social-icons') --- - + +
+

Social icons

+ + Docs + +
+
{ tiles.map((tile) => ( -
+
@@ -56,10 +67,9 @@ const fillers = Array.from({ length: 21 })
- -

Sign in with social media

- + Sign in with social media +
A button per provider, for a social sign-in screen.
{ socialList.map((social) => ( @@ -76,9 +86,10 @@ const fillers = Array.from({ length: 21 })
- -

List of all social media icons

- + + List of all social media icons +
Every brand icon shipped with the social icons plugin.
+
diff --git a/preview/pages/steps.astro b/preview/pages/steps.astro index 2e918736a..491f8333e 100644 --- a/preview/pages/steps.astro +++ b/preview/pages/steps.astro @@ -3,35 +3,65 @@ import DefaultLayout from '@shared/layouts/DefaultLayout.astro' import Card from '@ui/Card.astro' import CardBody from '@ui/CardBody.astro' import CardTitle from '@ui/CardTitle.astro' +import Icon from '@ui/Icon.astro' +import { getDocsUrl } from '@shared/lib/string-format' + +const stepDocsUrl = getDocsUrl('/ui/components/step') --- - -
-
+ +
+

Steps

+ + Docs + +
+ +
+
- Steps horizontal + Horizontal +
Numbered steps for a linear process, with the current step highlighted.
  • 1
  • 2
  • 3
 + +
+
+ + Horizontal counter +
The same steps without numbers, for a more minimal look.
 + +
+
+ + With labels +
Give each step a title instead of a number.
  • Cart
  • Billing Information
  • Confirmation
 + +
+
+ + Breadcrumb arrows +
Chevron-style steps, useful for wizards and checkouts.
  1. Step one
  2. Step two
    3. @@ -39,7 +69,13 @@ import CardTitle from '@ui/CardTitle.astro'
  3. Step four
 + +
+
+ + Breadcrumb numbered +
Number each step and mute the ones not yet reached.
  1. 1. Step one
  2. 2. Step two
    3. @@ -48,7 +84,13 @@ import CardTitle from '@ui/CardTitle.astro'
  3. 5. Step five
 + +
+
+ + Breadcrumb muted +
A quieter style for steps that shouldn't compete with the rest of the page.
  1. 1. Step one
  2. 2. Step two
    3. @@ -59,31 +101,40 @@ import CardTitle from '@ui/CardTitle.astro'
+
-
+
+
- Steps vertical + Vertical +
A title and description per step, for a detailed timeline.
  • Order received
    -
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus culpa cum expedita ipsam laborum nam ratione reprehenderit sed sint tenetur!
    +
    The order was placed and payment was confirmed. A confirmation email is on its way.
  • -
    Order received
    -
    Lorem ipsum dolor sit amet.
    +
    Preparing
    +
    The warehouse picked and packed the items.
  • Out for delivery
    -
    Lorem ipsum dolor sit amet.
    +
    The courier has the package and is on the way.
  • -
    Finalized
    -
    Lorem ipsum dolor sit amet.
    +
    Delivered
    +
    Signed for at the delivery address.
 + +
+
+ + Vertical counter +
Numbered steps in a vertical list, without descriptions.
  • Step one
  • Step two
    • diff --git a/preview/pages/tabs.astro b/preview/pages/tabs.astro index 565d0421a..48fdd1726 100644 --- a/preview/pages/tabs.astro +++ b/preview/pages/tabs.astro @@ -1,9 +1,20 @@ --- import DefaultLayout from '@shared/layouts/DefaultLayout.astro' import TabsCard from '@shared/components/cards/TabsCard.astro' +import Icon from '@ui/Icon.astro' +import { getDocsUrl } from '@shared/lib/string-format' + +const tabsDocsUrl = getDocsUrl('/ui/layout/navs-tabs') --- - + +
    +

    Tabs

    + + Docs + +
    +
    diff --git a/preview/pages/tags.astro b/preview/pages/tags.astro index e10c55cb1..6b365cc66 100644 --- a/preview/pages/tags.astro +++ b/preview/pages/tags.astro @@ -5,9 +5,11 @@ import TagList from '@ui/TagList.astro' import Card from '@ui/Card.astro' import CardBody from '@ui/CardBody.astro' import CardTitle from '@ui/CardTitle.astro' +import Icon from '@ui/Icon.astro' import people from '@data/people.json' import flags from '@data/flags.json' import siteData from '@data/site.json' +import { getDocsUrl } from '@shared/lib/string-format' const tagIcons = ['bold', 'italic', 'underline', 'copy', 'scissors', 'file-plus', 'file-minus', 'ghost', 'star', 'script', 'photo', 'dog', 'piano'] @@ -18,14 +20,24 @@ const people8 = people.slice(0, 8) // site.colors yields value objects with .class / .title. const colors = Object.values(siteData.colors) as { class: string; title: string }[] + +const tagDocsUrl = getDocsUrl('/ui/components/tag') --- - + +
    +

    Tags

    + + Docs + +
    +
    Default tags +
    The base tag, for a plain label.
    {range(1, 14).map((i) => )} @@ -37,6 +49,7 @@ const colors = Object.values(siteData.colors) as { class: string; title: string Tags with flag +
    Pair a tag with a country flag.
    {flags9.map((country) => )} @@ -48,6 +61,7 @@ const colors = Object.values(siteData.colors) as { class: string; title: string Tags with icon +
    Add an icon before the label.
    {tagIcons.map((icon) => )} @@ -59,6 +73,7 @@ const colors = Object.values(siteData.colors) as { class: string; title: string Tags with avatar +
    Add a person's avatar before the label.
    {people8.map((person) => )} @@ -70,6 +85,7 @@ const colors = Object.values(siteData.colors) as { class: string; title: string Tags with status +
    Add a small status dot in any theme or extended color.
    {colors.map((color) => )} @@ -81,6 +97,7 @@ const colors = Object.values(siteData.colors) as { class: string; title: string Tags with legend +
    Add a colored legend square instead of a dot.
    {colors.map((color) => )} @@ -91,7 +108,8 @@ const colors = Object.values(siteData.colors) as { class: string; title: string
    - Default tags + Selectable tags +
    Add checkbox to let users toggle a tag on and off.
    {range(1, 6).map((i) => )} {range(7, 12).map((i) => )} @@ -103,7 +121,8 @@ const colors = Object.values(siteData.colors) as { class: string; title: string
    - Default tags + Tags with badge +
    Add a badge count to the end of the tag.
    {range(1, 12).map((i) => )} diff --git a/preview/pages/toasts.astro b/preview/pages/toasts.astro index 8bc004439..03adbafd1 100644 --- a/preview/pages/toasts.astro +++ b/preview/pages/toasts.astro @@ -4,10 +4,21 @@ import Button from '@ui/Button.astro' import ButtonList from '@ui/ButtonList.astro' import Card from '@ui/Card.astro' import CardBody from '@ui/CardBody.astro' +import Icon from '@ui/Icon.astro' import Toast from '@ui/Toast.astro' +import { getDocsUrl } from '@shared/lib/string-format' + +const toastDocsUrl = getDocsUrl('/ui/components/toast') --- - + +
    +

    Toasts

    + + Docs + +
    + diff --git a/preview/pages/tracking.astro b/preview/pages/tracking.astro index b44e598b0..5fb94000e 100644 --- a/preview/pages/tracking.astro +++ b/preview/pages/tracking.astro @@ -3,7 +3,9 @@ import DefaultLayout from '@shared/layouts/DefaultLayout.astro' import Card from '@ui/Card.astro' import CardBody from '@ui/CardBody.astro' import CardTitle from '@ui/CardTitle.astro' +import Icon from '@ui/Icon.astro' import StatusMonitoring from '@shared/components/cards/StatusMonitoring.astro' +import { getDocsUrl } from '@shared/lib/string-format' interface TrackingItem { status?: 'success' | 'warning' | 'danger' @@ -43,14 +45,24 @@ const uptime: TrackingItem[] = [ { status: 'success', label: 'Operational' }, { status: 'success', label: 'Operational' }, ] + +const trackingDocsUrl = getDocsUrl('/ui/components/tracking') --- - + +
    +

    Tracking

    + + Docs + +
    +
    Basic example +
    Hover a block to see its status.
    {uptime.map((item) =>
    )}
    @@ -65,7 +77,8 @@ const uptime: TrackingItem[] = [
    - Squares variant (.tracking-squares) + Squares variant +
    Add .tracking-squares for square, evenly spaced blocks.
    {uptime.map((item) =>
    )}